Preact Compat
A React compatibility layer for Preact 8.x, enabling React modules to work with Preact without code changes.
What is Preact Compat?
preact-compat is a compatibility layer for Preact 8.x that provides React API compatibility, allowing React-based modules and components to work with Preact without any code changes. It solves the problem of library lock-in by enabling developers to use the extensive React ecosystem while benefiting from Preact's small size and performance. This shim exports the same interfaces as `react` and `react-dom`, making integration seamless.
Frontend developers using Preact 8.x who want to leverage existing React libraries, components, or modules without rewriting them. It's also for teams prioritizing bundle size reduction and performance while maintaining compatibility with React's API.
Developers choose preact-compat because it offers a straightforward way to adopt Preact's lightweight alternative to React without losing access to the rich React ecosystem. Its unique selling point is enabling near-perfect React compatibility with minimal configuration, leading to significant bundle size savings and improved performance.
Overview
ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
Use Cases
Best For
- Migrating React applications to Preact for reduced bundle size
- Using React UI libraries or components within a Preact project
- Integrating third-party React modules into Preact without modifications
- Reducing JavaScript payload in performance-critical web applications
- Experimenting with Preact while maintaining React ecosystem compatibility
- Aliasing React dependencies in build tools like Webpack or Browserify
Not Ideal For
- Projects using Preact X or later, where compat is built-in and more stable
- Applications that do not depend on third-party React libraries or components
- Environments where build tool aliasing is not supported or difficult to configure
- Teams requiring the latest React features that might not be fully emulated in this compatibility layer
Pros & Cons
Pros
Exports identical APIs to react and react-dom, allowing most React modules to work out-of-the-box without code changes, as demonstrated in the example project with 95% size reduction.
Supports major build tools like Webpack, Browserify, Babel, and Brunch through simple aliasing, making setup straightforward for various development workflows.
Reduces JavaScript payload dramatically compared to React, enabling performance-critical applications to benefit from Preact's 3kb core while retaining ecosystem access.
Can be used directly in browsers via script tags without bundlers, providing flexibility for quick prototyping or environments without complex build chains.
Includes PropTypes support that mirrors React's behavior, aiding in development with type checking and error messages similar to standard React.
Cons
Only compatible with Preact 8.x, an older release line; the README explicitly recommends upgrading to Preact X for better stability and built-in compat, making this package deprecated for new projects.
Requires manual aliasing in build tools, which can be error-prone and adds complexity, especially in projects with multiple dependencies or custom setups, as detailed in the setup instructions.
As a shim, it may not perfectly emulate all React APIs or behaviors, leading to edge cases or incompatibilities with certain libraries or features that rely on specific React internals.
Frequently Asked Questions
Related Projects
Preact Render To String📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Preact Material Componentspreact wrapper for "Material Components for the web"
Preact Virtual List:card_index: Virtual List that only renders visible items. Supports millions of rows.
Preact Markup:zap: Render HTML5 as VDOM, with Components as Custom Elements!
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.