Socket
Socket
Sign inDemoInstall

preact

Package Overview
Dependencies
0
Maintainers
12
Versions
235
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

preact

Fast 3kb React-compatible Virtual DOM library.


Version published
Maintainers
12
Weekly downloads
3,295,652
decreased by-9.67%

Weekly downloads

Package description

What is preact?

Preact is a fast, 3kB alternative to React with the same modern API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. Its goal is to provide the same rich and robust ecosystem that React has, while being leaner and more efficient, often used for performance-critical applications and situations where bundle size is a factor.

What are preact's main functionalities?

Creating Components

This code sample demonstrates how to create a simple Preact component and render it to the DOM. It's similar to React but with a smaller footprint.

import { h, render, Component } from 'preact';

class MyComponent extends Component {
  render() {
    return <div>Hello, Preact!</div>;
  }
}

render(<MyComponent />, document.body);

Using Hooks

This code sample shows how to use hooks in Preact, specifically the useState hook to create a simple counter component.

import { h, render, useState } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

render(<Counter />, document.body);

Preact/Compat

This code sample illustrates how to use Preact/Compat to achieve React compatibility, allowing developers to use Preact as a drop-in replacement for React.

import React from 'preact/compat';
import ReactDOM from 'preact/compat';

function App() {
  return <h1>Hello from Preact/Compat</h1>;
}

ReactDOM.render(<App />, document.getElementById('app'));

Other packages similar to preact

Readme

Source

Preact

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

All the power of Virtual DOM components, without the overhead:

  • Familiar React API & patterns: ES6 Class, hooks, and Functional Components
  • Extensive React compatibility via a simple preact/compat alias
  • Everything you need: JSX, VDOM, DevTools, HMR, SSR.
  • Highly optimized diff algorithm and seamless hydration from Server Side Rendering
  • Supports all modern browsers and IE11
  • Transparent asynchronous rendering with a pluggable scheduler
  • Instant production-grade app setup with Preact CLI

💁 More information at the Preact Website ➞

npm Preact Slack Community OpenCollective Backers OpenCollective Sponsors

coveralls gzip size brotli size

You can find some awesome libraries in the awesome-preact list :sunglasses:


Getting Started

💁 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! 🙌

Tutorial: Building UI with Preact

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.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(<main><h1>Hello</h1></main>, document.body);

// update the tree in-place:
render(<main><h1>Hello World!</h1></main>, document.body);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	)
}

render(<App />, document.body);

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

           

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]


License

MIT

Preact

Keywords

FAQs

Last updated on 22 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc