DOCSEARCHbyAlgolia
Submit Docs

Preact Documentation

repository·master·Indexed 18 days ago

https://github.com/preactjs/preact-www

Official documentation for Preact, a fast 3kB alternative to React. Includes guides on browser support for versions 10.x and 11.x, key differences from React, and detailed information on reactive state management using @preact/signals. Explore the ecosystem of Preact Add-Ons, components like preact-router and preact-helmet, GUI toolkits, and testing utilities such as preact-jsx-chai.

Tokens
97.7K
Snippets
348
Records
441
Agent score
63%

What's inside Preact

  1. Explore Preact Components

    master

    A variety of specialized components are available to handle common UI tasks such as routing, layout, and complex inputs.

    Notable components include:

    • preact-router: URL routing for components.
    • preact-markup: Renders HTML and Custom Elements as JSX/Components.
    • preact-portal: Renders components into different parts of the DOM (portals).
    • preact-richtextarea: A simple HTML editor component.
    • preact-token-input: A text field for tokenizing input (e.g., tags).
    • preact-virtual-list: Efficiently renders lists with millions of rows.
    • preact-layout: A small and simple layout library.
    • preact-helmet: Manages the document <head>.
    • preact-custom-scrollbars: Customizable scrollbars for native-feeling scrolling.
    • @formisch/preact: A high-performance, type-safe form library.

  3. Explore Preact Utilities

    master

    Small utility modules to assist with component creation and state management.

    • preact-classless-component: Create components without using the class keyword.
    • preact-hyperscript: Provides a Hyperscript-like syntax for creating elements.
    • shallow-compare: A simplified helper for shouldComponentUpdate.
    • @deepsignal/preact: An extension of @preact/signals for full state management.

  4. Explore Preact complete applications

    master

    For real-world production use cases, you can examine several complete applications built with Preact. These range from documentation sites to desktop apps and P2P tools:

    • Preact Website: The official documentation site (preactjs.com).
    • ESBench: Built with Preact and Material Design Lite.
    • GuriVR: A Web VR story creator.
    • BigWebQuiz: A progressive web app (PWA) for audience engagement.
    • Nectarine.rocks: An open-source implementation of peach.cool.
    • Web Maker: A fast, offline frontend playground.
    • BitMidi: A MIDI file archive.
    • BBC Roasting Calculator: A utility for calculating meat cooking times.
    • Dropfox: A desktop app for Dropbox built with Preact, Electron, and Photon.
    • Embed Hacker News: A tool for embedding Hacker News comment trees.
    • Connectivity Index: A search tool for Akamai internet connectivity data.
    • Drag & Drop file upload: A desktop app for uploading assets to Contentful.
    • Exchange Widget: A currency exchange widget using Preact, Meiosis, and ES modules.
    • Blaze: A modern P2P file-sharing PWA.
    • 1tuner: A web platform for radio and podcasts.

  6. Explore Preact GUI Toolkits

    master

    GUI Toolkits provide pre-styled component libraries and development environments for building user interfaces.

    Available toolkits include:

    • @mui/material: The Material UI library adapted for Preact.
    • preact-material-components: Material Components for the Web.
    • preact-mdl: Uses Material Design Lite (MDL) as Preact components.
    • preact-photon: Build desktop UIs using Photon.
    • preact-weui: Weui for Preact.
    • preact-fluid: A minimal UI kit.
    • storybook-preact: A UI development environment for building and testing components in isolation.

  7. Explore Preact Add-Ons

    master

    Preact Add-Ons are modules designed to extend the core functionality of Preact, covering paradigms like functional-reactive programming, universal rendering, and development tooling.

    Key Add-Ons include:

    • preact-cycle: Functional-reactive paradigm for Preact.
    • preact-render-to-string: Enables universal (SSR) rendering.
    • relaks: Allows creating components with asynchronous render methods.
    • express-preact-views: An Express View Engine for Preact.
    • Prefresh: Provides Fast-Refresh capabilities for Preact.
    • adonis-preact: Integration for using Preact within Adonisjs.

  8. Explore Preact Integrations

    master

    Integrations allow Preact to work with external ecosystems, frameworks, and platforms.

    Key integrations include:

    • Capacitor: Turn Preact apps into Native iOS/Android apps or PWAs.
    • Kretes: Build full-stack TypeScript apps using Preact and Node.js.
    • preact-island: Run Preact widgets on any website with reactive props.
    • preact-socrates: Plugin for Socrates.
    • preact-flyd: Use flyd FRP streams in Preact + JSX.
    • preact-i18nline: Integrates i18n-js with Preact via i18nline.
    • ziko-wrapper: Wrap zikojs components in Preact (and vice versa).
    • zikofy: Converts Preact components into Zikojs UIElements.

  9. What is Islands Architecture?

    master
    Islands Architecture is a pattern where the initial view is rendered on the server as a static HTML page, and interactivity is added to specific parts of the page (the 'islands') via client-side hydration. This approach, often called Partial Hydration, avoids hydrating the entire application, reducing the amount of JavaScript required to make a page interactive.

  10. What is the Virtual DOM?

    master
    A Virtual DOM is a lightweight, object-based description of a tree structure. Instead of imperatively manipulating the browser's DOM (e.g., document.createElement), you declaratively describe what the UI should look like using objects. Preact compares these Virtual DOM descriptions against the actual browser DOM and performs the necessary updates to synchronize them. This allows you to focus on the desired state of the UI rather than the manual steps required to change it.

  11. What is Context in Preact?

    master

    Context is a mechanism to pass data through the component tree without manually passing props through every intermediate component (a process known as "prop drilling"). It allows components anywhere in the hierarchy to subscribe to a value and receive pub-sub-style updates when that value changes.

    Preact provides two ways to use context:

    1. Modern Context API: Uses createContext (recommended).
    2. Legacy Context API: For backwards compatibility; should be avoided in new code due to potential UI "tearing" when intermediate components use shouldComponentUpdate.

  12. What are Refs in Preact

    master

    Refs (references) are stable, local values that persist across component renders. Unlike state or props, changing a ref does not trigger a re-render.

    Key usage rules:

    • Use them for imperative DOM manipulation (e.g., .focus(), .play(), measuring elements).
    • Use them to store arbitrary local values that need to remain stable (e.g., interval IDs, timeout IDs, or previous state values).
    • Do not use refs for rendering logic. They should only be consumed in lifecycle methods or event handlers.