ooadeAwesome Preact 
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
- Tips
Community
- Slack (Discussion Forum)
- Stack Overflow
- Github
Toolkits
- Preact CLI - Build a Preact Progressive Web App in seconds.
- 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.
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.
- 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.
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(r)eact.
- Pimg - Progressive Image Component; Used for lazy loading images.
- Preact Component Console - Console Emulator. Simulates typing via dynamic delays.
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
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).
Related Libraries
- React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
- Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
- Rax - A universal React-compatible render engine.
Tips
Contribute some ;)
Contribution
Your contributions and suggestions are welcome anytime. Build great stuffs with Preact, share with us ;)
Make sure you follow the guidelines. Thank you!
