Gathering detailed insights and metrics for preact-compat
ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
Installations
npm install preact-compatDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.15.0
NPM Version
6.9.0
Releases
53
Contributors
71
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
21,459,564
Last Day
7,285
Last Week
37,694
Last Month
169,892
Last Year
2,283,797
GitHub Statistics
MIT License
948 Stars
338 Commits
148 Forks
24 Watchers
33 Branches
71 Contributors
Updated on Feb 04, 2025
Bundle Size
13.41 kB
Minified
4.92 kB
Minified + Gzipped
Maintainers
8
Package Meta Information
Latest Version
3.19.0
Package Id
preact-compat@3.19.0
Size
52.19 kB
NPM Version
6.9.0
Node Version
10.15.0
Published on
Jun 14, 2019
Total Downloads
Cumulative downloads
Total Downloads
21,459,564
Last Day
-2.8%
7,285
Compared to previous day
Last Week
-4.1%
37,694
Compared to previous week
Last Month
6.3%
169,892
Compared to previous month
Last Year
-7.6%
2,283,797
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
6
Peer Dependencies
1
Dev Dependencies
41
babel-corebabel-eslintbabel-loaderbabel-plugin-transform-react-jsxbabel-preset-es2015babel-preset-reactbabel-preset-stage-0chaicross-envcross-vardiffes5-shimeslintgzip-size-clikarmakarma-chaikarma-chai-sinonkarma-chrome-launcherkarma-mochakarma-mocha-reporterkarma-phantomjs-launcherkarma-source-map-supportkarma-sourcemap-loaderkarma-webpackmkdirpmochanpm-run-allphantomjs-prebuiltpreactpreact-jsx-chaipretty-bytes-clirolluprollup-plugin-babelrollup-plugin-bublerollup-plugin-commonjsrollup-plugin-memoryrollup-plugin-node-resolvesinonsinon-chaiuglify-jswebpack
preact-compat
???? Note: This module is for Preact 8.x and prior - Preact X includes compat by default. For Preact X, please uninstall
preact-compatand replace your aliases withpreact/compat.
This module is a compatibility layer that makes React-based modules work with Preact, without any code changes.
It provides the same exports as react and react-dom, meaning you can use your build tool of choice to drop it in where React is being depended on.
Interested? Here's an example project that uses
preact-compatto work with an existing React library unmodified, achieving more than 95% reduction in size:
Why?
... or really, "why preact"?
React is a great library and a great concept, and has a large community of module authors creating high-quality components. However, these components are tightly coupled to React through the use of generic package imports (example).
Preact is a tiny (3kb) implementation of the core value of React, and maintains a nearly identical API. With a shim like this in place, it is possible to use other React-like libraries like Preact, without forking modules just to change their imports.
There are better long-term ways to solve the coupling issue, like using factory functions that accept named generic methods (not just React DI), as suggested by Eric Elliot. However, since the React community has already authored so many modules in a more explicitly coupled manner, it's worth having a simple short-term solution for those who would like to liberate themselves from library lock-in.
Installation
You need to install preact-compat first through npm:
1npm i --save preact-compat
NOTE: You need to have preact already installed, if you don't, install it like so:
1npm i --save preact
Usage with Webpack
Using preact-compat with Webpack is easy.
All you have to do is add an alias for react and react-dom:
1{ 2 // ... 3 resolve: { 4 alias: { 5 'react': 'preact-compat', 6 'react-dom': 'preact-compat', 7 // Not necessary unless you consume a module using `createClass` 8 'create-react-class': 'preact-compat/lib/create-react-class', 9 // Not necessary unless you consume a module requiring `react-dom-factories` 10 'react-dom-factories': 'preact-compat/lib/react-dom-factories' 11 } 12 } 13 // ... 14}
Usage with Browserify
Using preact-compat with Browserify is as simple as installing and configuring aliasify.
First, install it: npm install --save-dev aliasify
... then in your package.json, configure aliasify to alias react and react-dom:
1{ 2 // ... 3 "aliasify": { 4 "aliases": { 5 "react": "preact-compat", 6 "react-dom": "preact-compat", 7 // Not necessary unless you consume a module using `createClass` 8 "create-react-class": "preact-compat/lib/create-react-class", 9 // Not necessary unless you consume a module requiring `react-dom-factories` 10 "react-dom-factories": "preact-compat/lib/react-dom-factories" 11 } 12 } 13 // ... 14}
If you want to use a package that has a peer dependency of React and want it to point to preact-compat you’ll need to set Aliasify to be a global transform. This is not achievable by editing package.json, you’ll need to use the Browserify api and include the global option there:
b.transform(aliasify, {
global: true,
aliases: {
'react': 'preact-compat',
'react-dom': 'preact-compat'
}
});
Usage with Babel
Using preact-compat with Babel is easy.
Install the babel plugin for aliasing: npm install --save-dev babel-plugin-module-resolver
All you have to do is tell babel to process jsx with 'h' and add an alias for react and react-dom in your .babelrc:
1{ 2 // ... 3 "plugins": [ 4 ["module-resolver", { 5 "root": ["."], 6 "alias": { 7 "react": "preact-compat", 8 "react-dom": "preact-compat", 9 // Not necessary unless you consume a module using `createClass` 10 "create-react-class": "preact-compat/lib/create-react-class", 11 // Not necessary unless you consume a module requiring `react-dom-factories` 12 "react-dom-factories": "preact-compat/lib/react-dom-factories" 13 } 14 }] 15 ], 16 "presets": [ 17 "react" 18 ] 19 // ... 20}
Usage with Brunch
Using preact-compat with Brunch requires no extra plugins.
In your brunch-config.js you can export an npm object to configure aliases:
1// ... 2exports.npm = { 3 enabled: true, 4 aliases: { 5 'react': 'preact-compat', 6 'react-dom': 'preact-compat' 7 } 8} 9// ...
Once Aliased
With the above Webpack or Browserify aliases in place, existing React modules should work nicely:
1import React, { Component } from 'react'; 2import { render } from 'react-dom'; 3 4class Foo extends Component { 5 propTypes = { 6 a: React.PropTypes.string.isRequired 7 }; 8 render() { 9 let { a, b, children } = this.props; 10 return <div {...{a,b}}>{ children }</div>; 11 } 12} 13 14render(( 15 <Foo a="a">test</Foo> 16), document.body);
Use Without Webpack/Browserify
preact-compat and its single dependency prop-types are both published as UMD modules as of preact-compat version 0.6. This means you can use them via a <script> tag without issue:
1<script src="//unpkg.com/preact"></script> 2<script src="//unpkg.com/prop-types/prop-types.min.js"></script> 3<script src="//unpkg.com/preact-compat"></script> 4<script> 5 var React = preactCompat, 6 ReactDOM = preactCompat; 7 ReactDOM.render(<h1>Hello!</h1>, document.body); 8</script>
You can see the above in action with this JSFiddle Example.
PropTypes
preact-compat adds support for validating PropTypes out of the box. This can be disabled the same way it is when using React, by defining a global process.env.NODE_ENV='production'. PropType errors should work the same as in React - the prop-types module used here is published by the React team to replace PropTypes in React.
License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 12/24 approved changesets -- score normalized to 5
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Score
4.2
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More