preact-reconciler

Custom renderers for Preact in <1KB.

This package implements react-reconciler which allows for custom renderers to be implemented and shared between Preact and React such as @react-three/fiber.

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(
  <Canvas>
    <OrbitControls />
    <mesh>
      <boxGeometry />
      <meshNormalMaterial />
    </mesh>
  </Canvas>,
  root,
)

Installation

To get started, you'll only need preact and preact-reconciler. No need to install react or react-dom.

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.

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
  },
}