react-javelin

React helpers for @javelin ECS

These are specially usefull when composing deeply nested components with something like @react-three/fiber

Usage 👍

Use react as a declarative interface to write your game entities and components into jsx markup

Codesandbox: Physics & Falling Boxes Example

export default function App() {
  return (
    <Canvas shadows className="whole-canvas" style={{ position: "absolute" }}>
      <WorldProvider
        world={createWorld({
          systems: [PhysicsSystem, RandomBoxFountainSystem],
        })}
      >
        <Scene />
        <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
        <Monitor query={queries.randomBoxes}>{({ entityId }) => <Box />}</Monitor>
      </WorldProvider>
    </Canvas>
  );
}

Includes 🔋

• Components

  • Monitor — render an array components matching a query.

• Providers

  • WorldProvider — create your ecs "world" instance
  • EntityProvider — reference a specific entity, useful for deeply nested components

• Hooks

  • useWorld — access the world from anywhere in the app, via the WorldProvider
  • useTopic — add a Topic to the world
  • useSystem — drop in a system
  • useMonitor — provides a list of entities that matches a query
  • useEntity — returns an entity from the EntityProvider