Creating an ECS

useECS Hook#

Every time you use react-ecs, you need create an ECS instance. That's easy with the useECS hook:

const CoolSim = () => {
    const ECS = useECS();
    // ...
};

ECS.Provider#

ECS is used by everything.

To make it available, utilize the React Context tucked away in the ECS.Provider attribute:

const CoolSim = () => {
    const ECS = useECS();
    return <ECS.Provider>{/* ... */}</ECS.Provider>;
};

Driving the ECS#

The System functions you use are called every time that ECS.update is called. An easy way to do that is with the useAnimationFrame hook:

const CoolSim = () => {
    const ECS = useECS();
    useAnimationFrame((dt) => ECS.update(dt));
    return <ECS.Provider>{/* ... */}</ECS.Provider>;
};