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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-24T14:05:38.000Z (3 months ago)
• Last Synced: 2025-04-25T14:08:29.090Z (18 days ago)
• Topics: fiber, jsx, minimal, preact, react, reconciliation, renderers, vdom
• Language: TypeScript
• Homepage: https://npmjs.com/preact-reconciler
• Size: 126 KB
• Stars: 131
• Watchers: 2
• Forks: 4
• 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

  },

}

```