@dotdotdash/stunner-react

React bindings for @dotdotdash/stunner-core. Provides a ready-made <RendererHud> overlay component with a collapsible settings panel (render quality, post-processing toggles, performance telemetry) and an ergonomic settings I/O API.

Install

npm install @dotdotdash/stunner-react @dotdotdash/stunner-core

Peer dependencies: @dotdotdash/stunner-core ^0.4.2, react ^19.0.0.

Usage

import { RendererHud } from '@dotdotdash/stunner-react';
import { RendererEngine } from '@dotdotdash/stunner-core';

function App() {
  const engineRef = useRef<RendererEngine | null>(null);

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
      <canvas ref={/* attach engine to canvas */} style={{ width: '100%', height: '100%' }} />
      <RendererHud engine={engineRef.current} />
    </div>
  );
}

Vite configuration

Add aliases for both packages:

// vite.config.ts
import path from 'node:path';

export default {
  resolve: {
    alias: {
      '@dotdotdash/stunner-core': path.resolve('./node_modules/@dotdotdash/stunner-core/src'),
      '@dotdotdash/stunner-react': path.resolve('./node_modules/@dotdotdash/stunner-react/src/index.ts'),
    },
    dedupe: ['react', 'react-dom'],
  },
};

License

MIT