GenesisGL React

React hooks and components for GenesisGL — a lightweight WebGL 3D engine.

Installation

npm install @fonsecabarreto/genesis-gl-core @fonsecabarreto/genesis-gl-react

Both packages are required. The React package is built as an optional integration layer.

Usage

Hook: useGenesisGL()

Initialize the WebGL engine within a React component:

import { useGenesisGL } from '@fonsecabarreto/genesis-gl-react/hooks';

const MyApp = () => {
  const renderer = useGenesisGL({
    canvasRef,
    onReady: (scene, viewport) => {
      // Add models, lights, etc.
    },
  });

  return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
};

Component: <GenesisGLCanvas>

Wrapper component that handles all setup + cleanup automatically:

import { GenesisGLCanvas } from '@fonsecabarreto/genesis-gl-react/components';

export function App() {
  return (
    <GenesisGLCanvas
      onReady={(scene, viewport, renderer) => {
        // Configure your scene here
      }}
    />
  );
}

License

MIT

#publish

npm publish --access public