React helpers for @javelin
ECS
These are specially usefull when composing deeply nested components with something like @react-three/fiber
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>
);
}
-
-
Monitor
— render an array components matching a query.
-
-
-
WorldProvider
— create your ecs "world" instance -
EntityProvider
— reference a specific entity, useful for deeply nested components
-
-
-
useWorld
— access the world from anywhere in the app, via theWorldProvider
-
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 theEntityProvider
-