10 Top Preact Libraries and Tools for 2020

My top favorite tools and libraries for Preact, React’s lightweight twin.

Preact is an alternative to the popular React library. It has fewer complexities and performs faster in comparison to React due to its smaller size of 3kb. Preact also uses the ES6 API similar to React.

It was developed by Jason Miller to provide a feature set similar to React in a smaller package. Preact has the fastest virtual DOM libraries and diff implementation. Some of its salient features are:

1. Increased performance
2. Decreased size
3. Efficient memory usage
4. Compatibility with the React API
5. Extensive browser support including IE7 and IE8 by using polyfills
6. Simpler code which is easier to understand

Uber, Lyft, and Housing.com are just a few of the organizations that have migrated to Preact and benefited both in terms of increased performance and reduced size. The case study of Uber is well known. Uber migrated from its native app to a web client that provides an app-like experience via web browsers. The move to Preact ensured that browsers loaded faster, resulting in an increased number of ride requests.

Preact has many tools and libraries to support and extend its functionality. Here are my top 10 picks.

1. Redux Zero

Redux Zero is a lightweight state container based on Redux. Written in TypeScript, it supports not only Preact, but other libraries and frameworks like React, Svelte, and Vue. It is smaller in size and more efficient as it has a single store and no reducers.

Use the NPM command given below to install Redux Zero:

Coding with Redux Zero is simple and straightforward. Follow these steps:

1. Create the store.js file as follows to create a store that will be used to manage application state.

2. Actions are used to change the state of the store. Create the Action.js file as follows:

3. As actions are pure functions, they are bound to the store.

4. Now let’s connect all of these components in the index.js file.

Refer to the working code of this example here.

2. Bit.dev (for Preact and React)

Bit (Github) lets you easily “harvest” components from any codebase and share them to a collection (a sort-of modular library) in bit.dev.

Bit versions each component individually and when you’re ready to share it, it builds and tests it in an isolated environment to make sure you’re sharing truly reusable components that are not coupled to your project.

Example: Exporting components from a React app to a shared collection in bit.dev

You and your team can browse through your collection using Bit’s search-tools and playground, npm install a shared component just like any other package or bit import it, to modify it in your local dev environment (and even push the modified version back to the shared collection).

It’s a great way to gradually build a modular component library. Whenever you build a reusable component that’s worth sharing — simply push it to the shared Bit collection.

Use it to improve collaboration with your team, maximize code reuse, build more scalable and maintainable code, and keep a consistent UI.

Bit supports Preact, React, React with TypeScript, Vue, Angular and many more.

3. fpreact: (Functional Preact)

fpreact is an alternative API used to create Preact components. The API provides state management similar to redux and facilitates functional programming by removing the use of this.

fpreact is based on elm, which is used to create graphical UIs for web browsers. fpreact uses a domain-specific programming language and is a competitor of React.js and Vue.js.

fpreact is written in and supports Typescript, but can also work with javascript. To install it, use the following NPM command:

Below is the simple ES6 + JSX code for a ‘Hello World’ application:

4. ProppyJs

Proppy is a JavaScript library used to compose props, and it is only 1.5 kb in size. The props passed to ProppyJS can be used in any component–based UI framework like React, Vue, and Preact.

It also works with the data layer as a props composition. These are some of the benefits of using Proppy:

1. Makes components stateless, as Proppy accepts and renders the props
2. Makes functional props as they are composed within functions and grow easily
3. It sets an application-wide provider that is global and accessible from any component
4. It is interoperable as it integrates easily with other libraries
5. Makes testing and rendering easier through many of your favorite tools

Here is a simple example of using ProppyJS with Preact:

5. ClearX

ClearX maintains the application state and is an alternative to Redux and MobX. It binds application state to UI components using an interface and provides getters and setters for deep properties of nested data.

React class components and Function UI components work well with ClearX. You can simply install ClearX with the following NPM command:

Follow these steps to use ClearX:

1. Create a datastore:

ClearX first creates the stores and then uses the path to set deep properties of data. So they can be defined for non-existing or undefined properties.

The datastore can be of any type.

2. Bind data to the UI store as follows:

Now it can be bound to the class store or selected path of the store using the useState() hook.

ClearX also provides multiple API’s to operate and find the data as per applications.

6. Preact-urql

Preact-urql uses urql with the Preact core and hooks. It is used to improve the usability and stability of customized GraphQL infrastructure. To start, you need to import a single package from the framework of your choice. But it also has collections of connected parts to extend the application.

When using GraphQL, a primary data layer is created by urql to handle content-heavy pages through “Document Caching” and Normalized caching for data-heavy apps. It creates a user interface using trees of components and elements.

This is an example of Preact-urql where the render() function accepts the tree description and creates structures. It then appends the structure to the DOM element of a parent as a second argument. Thereafter the render() function uses the existing tree and calculates the difference in the outputs of current and previous to update the DOM.

Apart from using Preact-CLI, here are some tools to make your coding with Preact much easier.

7. nwb

nwb is a zero-configuration development setup but also supports configuration and plugin modules. It provides a quick development environment for Preact and its components.

nwb provides auto-prefixed CSS, default polyfills, and uses promises for configurations. nwb uses JavaScript and JSX features and provides an environment for tests and optimizes webpack builders. It can be installed using npm as follows:

This is an example of Preact components to whip up a lightbulb.js:

Use the following command to install essential dependencies and start a webpack development server.

For a production build, use “nwb preact build”:

nwb provides automatic dependency installations, style preprocessing, rendering the entry module, and hot module replacement along with the development and testing environment.

8. Rewired

Rewired allows you to tweak the create-react-app webpack config(s) without the need to eject or create a fork of the react-scripts. It allows you to add plugins, loaders, and all the benefits of the create-react-app command without the restrictions of “no-config.”

Use the following NPM command to install rewired:

To make changes to config files, you can create config-overrides.js within the root directory.

“Flip” the existing calls of Preact-scripts in npm to start, build, and test. All scripts other than those required to eject can be flipped.

You can now start and run the server, and set a custom path for config-pverride.js..

9. Preact-CLI-postcss

Preact-CLI-postcss will provide the postcss.config.js file and disable the default postcss config so that you can have better control. To install, use the following command:

It adds your properties to preact.config.js as follows:

10. Create Preact APP

Create Preact APP can be used to create Preact apps with no configurations. It is similar to create-react-app, but uses Preact. Some of its important characteristics are:

1. One dependency: One build dependency, uses webpack, Babel, ESLint and along with a cohesive, curated experience on top.
2. No Configuration Required: No requirement of configuration for production and development builds.
3. No Lock-in: Anytime you can “eject” to a custom setup, it moves all configuration and builds dependencies with a single command.

You can use the below command to set and start the dev-server:

This command will create the below folder structure with pre-installed transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

Use the following commands to run your application:

Conclusion

Preact is gradually gaining popularity over React due to its lightweight nature and faster performance. It gives users the ability to expand its features using the libraries and tools. Many organizations like Uber have migrated to Preact and experienced many benefits making Preact a worthy alternative to React.

Learn More

Maximizing Code Reuse in React

10 Useful React Components for 2020

9 Tips for Building Awesome Reusable React Components

React TypeScript: Basics and Best Practices