preact | ⚛️ Fast 3kB React alternative with the same modern API | Frontend Framework library

 by   preactjs JavaScript Version: 11.0.0-experimental.1 License: MIT

kandi X-RAY | preact Summary

kandi X-RAY | preact Summary

preact is a JavaScript library typically used in User Interface, Frontend Framework, React applications. preact has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i preact-event-hook-fork' or download it from GitHub, npm.

Fast 3kB alternative to React with the same modern API.

            kandi-support Support

              preact has a medium active ecosystem.
              It has 34549 star(s) with 1907 fork(s). There are 406 watchers for this library.
              There were 8 major release(s) in the last 6 months.
              There are 148 open issues and 1522 have been closed. On average issues are closed in 136 days. There are 100 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of preact is 11.0.0-experimental.1

            kandi-Quality Quality

              preact has 0 bugs and 0 code smells.

            kandi-Security Security

              preact has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              preact code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              preact is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              preact releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed preact and discovered the below as its top functions. This is intended to give you an instant insight into preact implemented functionality, and help decide if they suit your requirements.
            • Init debug stack
            • Update DOM nodes
            • Recursively diff two rendered nodes .
            • Recursively diff two DOM nodes
            • Creates a new React component instance .
            • Create esbuild plugin
            • Create a stats stats from the logs .
            • Generate config for BenchmarkFile
            • Set the value of a property .
            • Analyze the framework names .
            Get all kandi verified functions for this library.

            preact Key Features

            No Key Features are available at this moment for preact.

            preact Examples and Code Snippets

            TypeScriptdot img1Lines of Code : 259dot img1no licencesLicense : No License
            copy iconCopy
            // When using with React:
            import { route, createRouter } from '@switcher/react'
            // Or Preact:
            import { route, createRouter } from '@switcher/preact'
            const routes = [
              route('login', '/login', { auth: false }),
              route('projects', '/projects', { aut  
            Switcher,Get started
            TypeScriptdot img2Lines of Code : 124dot img2no licencesLicense : No License
            copy iconCopy
            // When using with React:
            import { createRouter, InferRouteRef, route } from '@switcher/react'
            // Or Preact:
            import { createRouter, InferRouteRef, route } from '@switcher/preact'
            // Routes
            export const appRoutes = [
              route('home', '/'),
            JavaScriptdot img3Lines of Code : 66dot img3no licencesLicense : No License
            copy iconCopy
            import { h, render } from 'preact'
            import { Provider } from 'preact-redux'
            import ms from 'milliseconds'
            import { createStore, applyMiddleware } from 'redux'
            import rootReducer from './state/root'
            import RootComponent from './components/root'
            Configure multiple next plugins: withMDX, withBundleAnalyzer
            JavaScriptdot img4Lines of Code : 65dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const withPlugins = require('next-compose-plugins');
            const withMDX = require('@next/mdx');
            const withBundleAnalyzer = require('@next/bundle-analyzer')({
              enabled: process.env.ANALYZE === 'true',
            module.exports = withPlugins([
            How to use jsx in preact via cdn?
            JavaScriptdot img5Lines of Code : 17dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Render by Preact client library using h and render function
            var Component = window.preact.Component, 
                h = window.preact.h, 
                render = window.preact.render;
            var PreactApp = function (props){
              return h('h
            How to convert create-react-app to Preact?
            JavaScriptdot img6Lines of Code : 10dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npx install -g create-react-app
            npx create-react-app my-app --scripts-version @just-boris/preact-scripts
            cd my-app
            npm uninstall react react-dom
            npm install preact
            //before this take a look at your preact dependen
            Is there a create-react-app alternative for Preact?
            JavaScriptdot img7Lines of Code : 12dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            ### Preact instalation
            npm install -g preact-cli
            ### create react app equivalent
            preact create default my-project
            ### Go into the generated project folder
            cd my-project/
            ### Start the devserver
            npm start
            How to include Preact component with hooks in React app?
            JavaScriptdot img8Lines of Code : 29dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // Won't work, PreactComponent is not a React component
            React.createElement(PreactComponent, null)
            import React, { useRef, useEffect } from "react";
            import { render, h } from "preact";
            import { PreactComponent } fr
            How to create preact multiple embeddable widget?
            JavaScriptdot img9Lines of Code : 43dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { render, h } from 'preact';
            // WidgetA is a Preact component.
            // It could be functional or class component.
            export function WidgetA(props) {
                // Use props here
                return (
            // Render function for Wi
            Does a clean and extendable LSTM implementation exists in PyTorch?
            Lines of Code : 87dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import math
            import torch as th
            import torch.nn as nn
            class LSTM(nn.Module):
                def __init__(self, input_size, hidden_size, bias=True):
                    super(LSTM, self).__init__()
                    self.input_size = input_size
                    self.hidden_size = 

            Community Discussions


            Cannot find module 'react' when use third party React UI lib - Vite + Preact
            Asked 2022-Apr-04 at 07:40

            I'm facing this issue in this Vite started repository.


            I'm using Vite + Preact + Vitest + Testing Library

            If I'm testing any code inside the codebase, it works fine, but If the test runs against some component that uses another component from an external library, I'm getting this error.



            Answered 2022-Apr-04 at 07:40

            You'll want to run the following:



            webpack CLI error - [webpack-cli] Error: Unknown option '--inline'
            Asked 2022-Mar-24 at 03:17

            When I try to start my Preact app using npm start it gives this error



            Answered 2021-Dec-30 at 14:20

            It's been deprecated, and is true by default now.

            You can't use inline option (it will be always true in next major).

            From this comment on a related issue.
            I couldn't find anything more authoritative about the change



            Styled Components adding component name as class name
            Asked 2022-Mar-16 at 13:21

            I'm using Preact with styled-components (storybook) and webpack to build my project

            I have a component called AlphaBarWrapper with a styled component inside of it called StyledAlphabar.

            Styled Components is adding AlphaBarWrapper_StyledAlphaBar-sc-[random string] as a classname to my component when rendered.

            I'd like this to be the standard sc-[random string] class name instead. I can't find any documentation on why it is rendering this.

            This occurs in both a standard webpack build and the storybook build, so I expect that there's an option that I'm missing.



            Answered 2022-Mar-16 at 13:21

            If i'm right understood your issue you need install babel-plugin-styled-components. Then in the root directory create .babelrc and put this code:



            `craco start` not compiling, `craco build` does
            Asked 2022-Feb-16 at 16:40

            I've recently switched my CRA dictionary application to Preact using craco. I've made this work using webpack aliases, which replace references to react packages with preact packages (e.g. preact/compat).

            What happens when I run... craco build

            I get no errors and the build successfully completes, and you can see the folder here:

            Everything fine here.

            craco start

            It starts the predeployment checks (I think), and hits a snag very quickly. It can't find the react module.



            Answered 2022-Feb-16 at 16:40

            You need to keep react installed, unfortunately. It's required by react-scripts for starting the dev server and is unavoidable without forking the package.

            If you're concerned about the alias working with React still being installed, you can comment out your config and compare build sizes. You should see a sizable difference, confirming your alias works as intended.



            Getting current URL without using Preact-Router
            Asked 2022-Jan-26 at 18:20

            I'm building a widget.

            I read it somewhere

            "not to use preact-router, because it adds event listeners to all anchors on document level, which is not acceptable for a widget (remember not to mess with the hosting page)".

            I want to just get the current URL and no other data is required. How can it be achieved?

            P.S: I'm new to programming. Any help is appreciated.



            Answered 2022-Jan-26 at 18:20

            If all you want is the current URL then window.location does the trick.



            Programmatically route with wmr / preact-iso?
            Asked 2022-Jan-18 at 21:19

            I've been playing with wmr and preact-iso and coming from preact-cli, preact-router, etc, I'm a bit confused on how to do some of the things I used to be able to do.

            Case in point: preact-router's route() function seems to be missing from preact-iso's router package.

            How would I route from code?

            I used to be able to do this:



            Answered 2022-Jan-18 at 21:19

            route() exists upon the useLocation hook.



            Where do I find a proper doc on preact ejs variables?
            Asked 2022-Jan-09 at 06:31

            I decided to move my react hobby project from react to preact and struggling with the documentation. Most of the information I got was either from the existing examples or issue discussions on the github.

            But what still didn't find is the info on ejs variables used in the template html file.

            Is there a good explanation what variables there are by default and how to manage them?



            Answered 2022-Jan-09 at 06:31

            There's not much of use that's there by default, as this is instead a method of allowing you to inject your own values. If you want to see what's there by default, you can add the following to your template.html:



            leaflet usage in Preact JS
            Asked 2022-Jan-07 at 10:48

            How can we embeded leaflet Map into Preact component. I am creating a Map widget using webpack. In the below I show you the code I implemented.



            Answered 2022-Jan-07 at 10:48

            This is easy. I found a Stack Overflow question related to Leaflet usage in LitElement.

            My answer is similar as this, but need to do some changes, because I am creating a web component (widget).



            styled-jsx works inline but not as module
            Asked 2021-Dec-25 at 01:14

            I've added styled-jsx to my Preact (set up with this TS template) project, and can style things inline via the

            But if I extract that style into a separate css variable (either in the same file or externally) while following their instructions I get the following error:



            Answered 2021-Dec-25 at 01:14

            Using .babelrc isn't supported at the moment in Preact-CLI, though this is due to an odd bug that I haven't yet been able to track down. Sorry about that.

            You do however still have a way to edit the Webpack config, and that's with your preact.config.js, the docs for which can be found here. In your case, what you'll want is the following:




            Cannot convert non-arrow function to a function expression. React/Preact build fail
            Asked 2021-Dec-10 at 07:12

            I am building a React app well technically preact but on the build it fails on the current code:

            This is what the "helper class" looks like:



            Answered 2021-Dec-08 at 10:01

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install preact

            💁 Note: You don't need ES2015 to use Preact... but give it a try!. The easiest way to get started with Preact is to use Preact CLI. This simple command-line tool wraps up the best possible tooling for you, and even keeps things like Webpack and Babel up-to-date as they change. Best of all, it's easy to understand! Start a project or compile for production in a single command (preact build), with no configuration needed and best practices baked in! 🙌. With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children. To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i preact

          • CLONE
          • HTTPS


          • CLI

            gh repo clone preactjs/preact

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link