Skip to main content

Hooks

This page has a short description of all available hooks. For more information check the API Documentation.

useAnimationFrame(number => void)#

Registers a callback with requestAnimationFrame as convenience.

useAnimationFrame((dt) => console.log(`Last frame took ${dt} seconds.`));

useAnimationFrame is a good way to drive ECS.update:

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

See the API Documentation for more information.

useECS() => ECS#

Returns an ECS instance.

See the API Documentation and Creating an ECS for more information.

useEngine() => Engine#

Returns the Engine instance from the nearest ECS.Provider context.

See the API Documentation and Processing Entities.

useEntity() => Entity#

Returns the nearest Entity instance.

This will mostly be useful for implementing complex facets like DOMView.

See the API Documentation for more information.

useFacet(Facet<T>) => T#

Returns an instance of the passed facet class for the nearest entity.

This will mostly be useful for implementing complex facets like DOMView.

See the API Documentation for more information.

useQuery(Entity => boolean) => Query#

Returns Query newly registered with the Engine of the nearest ECS.Provider.

The passed predicate dictates which Entities the query matches.

Tip

As the set of entities that match the query changes, this hook will cause component re-rendering.

See the API Documentation for more information.

useStatefulRef(T) => [T, (T) => void]#

A utility hook that combines useRef and useState.

Which means:

  • It's initial value is evaluated only once, at component construction (useRef)
  • Changing its value causes component re-render (useState)

See the API Documentation for more information.

useSystem(number => void, number = 0) => null#

Register a callback with the Engine of the nearest ECS.Provider. An optional second parameter allows you to control the ordering priority.

See the API Documentation and Systems and Queries for more information.

useTimer(number, () => void)#

Registers a callback to be called every number of seconds instead of every update.

See the API Documentation for more information.