Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codyjasonbennett/preact-reconciler
Custom renderers for Preact in <1KB.
https://github.com/codyjasonbennett/preact-reconciler
fiber jsx minimal preact react reconciliation renderers vdom
Last synced: 6 days ago
JSON representation
Custom renderers for Preact in <1KB.
- Host: GitHub
- URL: https://github.com/codyjasonbennett/preact-reconciler
- Owner: CodyJasonBennett
- License: mit
- Created: 2023-03-04T19:11:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-31T10:49:29.000Z (over 1 year ago)
- Last Synced: 2024-05-01T18:29:28.167Z (8 months ago)
- Topics: fiber, jsx, minimal, preact, react, reconciliation, renderers, vdom
- Language: TypeScript
- Homepage: https://npmjs.com/preact-reconciler
- Size: 84 KB
- Stars: 113
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[![Size](https://img.shields.io/bundlephobia/minzip/preact-reconciler?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/preact-reconciler)
[![Version](https://img.shields.io/npm/v/preact-reconciler?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/preact-reconciler)
[![Downloads](https://img.shields.io/npm/dt/preact-reconciler.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/preact-reconciler)# preact-reconciler
Custom renderers for Preact in <1KB.
This package implements [`react-reconciler`](https://npmjs.com/react-reconciler) which allows for custom renderers to be implemented and shared between Preact and React such as [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber#readme).
```jsx
import { render } from 'preact'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'// This is the same as ReactDOM.createRoot(root).render(...) with preact/compat
render(
,
root,
)
```## Installation
To get started, you'll only need `preact` and `preact-reconciler`. No need to install `react` or `react-dom`.
```bash
npm install preact preact-reconciler
yarn add preact preact-reconciler
pnpm add preact preact-reconciler
```With your choice of tooling, alias `react`, `react-dom`, and its dependencies.
```js
const resolve = {
alias: {
react: 'preact/compat',
'react-dom': 'preact/compat',
'react-reconciler': 'preact-reconciler',
},
}// vite.config.js
export default { resolve }// webpack.config.js
module.exports = { resolve }// next.config.js (webpackFinal for .storybook/main.js)
module.exports = {
webpack(config) {
Object.assign(config.resolve.alias, resolve.alias)
return config
},
}
```