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