A curated list of amazingly awesome things regarding Preact ecosystem 🌟
Preact is a fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
Contents
- Community
- Toolkits
- Boilerplates
- Routing
- Components
- Libraries
- Testing Utils
- Articles
- Example Apps
- Real Apps
- Related Libraries
Community
- Slack (Discussion Forum)
- Stack Overflow
- Github
Toolkits
- Preact CLI – Build a Preact Progressive Web App in seconds.
- Vite – Fast native-ESM powered web dev build tool for Preact, Vue or React.
- nwb – Quick Development with React, Inferno or Preact.
- React App Rewire Preact – Use Preact with create-react-app without ejecting.
- Preact CLI PostCSS – It removes the default postcss config on Preact CLI, so you can use postcss.config.js.
- Create Preact App – Create Preact apps with no build configuration.
- Storybook Preact – Storybook for Preact is a UI development environment for your Preact components.
Boilerplates
- Official Boilerplate – Ready-to-rock Preact starter project, powered by Webpack.
- Preact Simple Starter – PWA Simple Starter with Preact, Preact-mdl and Webpack2.
- Preact Offline Starter – Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Preact.
- TypeScript Preact Starter – Barebones starter project for Preact with TypeScript.
- TypeScript PWA Preact Starter – PWA Starter with TypeScript and SASS (131kb)
- Preact Redux SSR Example – Server-side Rendering with Redux Example.
- Preact PWA – PWA focused on raw performance, server side rendering, prerendering, redux, express, rollup.
- Preact Boilerplate – Absolutely minimal Preact starter project, powered by Parcel.
Routing
- Preact Router – URL router for Preact.
- Preact Route Async – A (440b gzip) route component that enables async loading of page-components.
- Wouter – A tiny (1KB gzip) router for Preact/React with React Router-like API.
Components
- Preact Material Components – Preact wrapper for “Material Components for the web”.
- Preact Scroll Header – A (800b gzip) header that will show/hide while scrolling for Preact.
- Preact Progress – Simple and lightweight (~590 bytes gzip) progress bar component for Preact.
- Preact Compat – Use any React library with Preact (full example).
- Preact Render To String – Universal rendering.
- Preact Markup – Render HTML & Custom Elements as JSX & Components.
- Preact Portal – Render Preact components into (a) SPACE.
- Preact Richtextarea – Simple HTML editor component.
- Preact Token Input – Text field that tokenizes input, for things like tags.
- Preact Virtual List – Easily render lists with millions of rows (demo).
- Preact Cycle – Functional-reactive paradigm for Preact.
- Preact Layout – Small and simple layout library.
- Preact Socrates – Preact plugin for Socrates.
- Preact Flyd – Use flyd FRP streams in Preact + JSX.
- Preact I18nline – Integrates the ecosystem around i18n-js with Preact via i18nline.
- Preact MUI – The MUI CSS Preact library.
- Preact MDL – Use MDL as Preact components.
- Preact Photon – Build beautiful desktop UI with photon.
- Preact Classless Component – Create preact components without the class keyword.
- Preact Hyperscript – Hyperscript-like syntax for creating elements.
- Shallow Compare – Simplified
shouldComponentUpdatehelper. - Preact Codemod – Transform your React code to Preact.
- Preact Helmet – A document head manager for Preact.
- Preact Delegate – Delegate DOM events.
- Preact No SSR – Skip Server Side Rendering of Components.
- Preact Head – Standalone, declarative <Head /> for Preact.
- Preact Side Effect – Create components whose nested prop changes map to a global side effect.
- Preact Tiny Atom – Preact Integration with Tiny Atom.
- Preact Level List – Live updating leveldb list component for Preact.
- Preact Country Picker – Country picker based on bootstrap 3 made for Preact.
- Preact Fluid – A minimal UI kit for Preact.
- Preact Feather Icons – Feather icons for Preact.
- Preact Animate On Change – Add CSS3 animation when properties change.
- Preact Async Route – Async route component for preact-router.
- MU Forms – Dead simple form library for (P)React.
- Pimg – Progressive Image Component; Used for lazy loading images.
- Preact Component Console – Console Emulator. Simulates typing via dynamic delays.
- Preact Translate – Minimalistic translate (i18n) library for Preact.
- Preact Dock – Simple DnD and touch-enabled Dock for Preact apps.
- Preact Particles – Lightweight component to easily add cool particles animations to websites.
- Pant – Mobile UI Components built on Preact (docs and demos). Ported from awesome Vue components of Vant.
Libraries
- Redux Zero – A lightweight state container based on Redux with a single store and no reducers.
- FPreact – Provides an alternative api for creating preact components, heavily inspired by elm.
- ProppyJS – A tiny library for functional props composition
- ClearX – Fast & Effortless state management for React, Preact and Inferno with zero learning curve.
- Preact-urql – Use urql with Preact core + hooks.
- hooked-head – Hooks to manipulate the
<head>section of the DOM. This has a subpackage with core preact support (usingpreact/hooks).
Testing Utils
- Preact JSX Chai – JSX assertion testing (no DOM, right in Node).
- Preact Render Spy – Render Preact components with access to the produced virtual dom for testing.
- Preact Test Utils – Mock react-test-utils enzyme in preact.
- Preact Testing Library – Simple and complete Preact DOM testing utilities that encourage good testing practices.
Articles
- WTF is JSX
- The Inner Workings of Virtual DOM
- Using Preact Instead of React
- Preact Internals #1: The Easy Parts
- Preact Internals #2: The Component Model
- Building a Small PWA with Preact and Firebase
- Authentication with Auth0
Example Apps
- Preact HN – Demonstration of Preact used to build Hacker News as a PWA.
- TodoMVC – TodoMVC done in Preact. Under 6kb and fast.
- Colors App – PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
- Tracks – PWA for tracking things in general. Gdrive Sync.
- Hueify – Simple controller for your Philips Hue lights.
- Golazon – Football data mnmlist way.
- Shopping List – Progressive Web App Built Using Preact and PouchDB.
- Code and Comment – The application to add the comments to a file in Github (demo).
- Play.cash 🎶 (GitHub Project)
- Songsterr 🎼 Using Preact X in production since 10.0 alpha
- BitMidi 🎹 Wayback machine for free MIDI files (GitHub Project)
- Ultimate Guitar 🎸speed boosted by Preact.
- ESBench is built using Preact.
- BigWebQuiz (GitHub Project)
- Nectarine.rocks (GitHub Project) 🍑
- OSS.Ninja (GitHub Project)
- GuriVR (GitHub Project)
- Offline Gallery (GitHub Project) 🎈
- Periodic Weather (GitHub Project) ☀️
- Rugby News Board (GitHub Project)
- Preact Gallery an 8KB photo gallery PWA built using Preact.
- Rainbow Explorer Preact app to translate real life color to digital color (Github project).
- YASCC Yet Another SoundCloud Client (Github project).
- Journalize 14k offline-capable journaling PWA using preact. (Github project).
- Proxx A game of proximity by GoogleChromeLabs using preact. (Github project).
- Web Maker An offline and blazing fast frontend playground built using Preact. (Github project).
- Intergram A live chat widget linked to your Telegram messenger built using Preact. (Github project).
- Preact App in ES6 without Babel or JSX (GitHub Project).
- GHFresh Monitor GitHub repository releases – Prerendering with Preact. Built with Preact Compat, TypeScript, Material-UI and Redux Toolkit. (GitHub Project).
- Passwords Fountain – modern & performant password manager interface which works everywhere (Github project).
Related Libraries
Related Post:
Awesome React Hooks – Massive Collection of Resources
![Photo of [Book] Bootstrap Related Tools and Skills](https://learnpracticeandshare.com/wp-content/uploads/2021/04/Bootstrap-Related-Tools-and-Skills-390x220.jpg)
