Entity Views

At its core, react-ecs is just a way for you to declare the parts of an ECS simulation in the style of React. How you present that simulation is entirely up to you.

In @react-ecs/core we offer a simple DOM oriented view called DOMView.

DOMView#

DOMView is a simple component that you can use as a Facet on your Entities. It's children become that representation of that entity within the DOM:

<Entity>
    <DOMView>
        <img
            src="https://i.imgur.com/kFjaH5l.png"
            style={{
                position: 'absolute',
                left: 0,
                top: 0,
                width: 16,
                height: 16,
            }}
        />
    </DOMView>
</Entity>

Using in Queries#

You can treat DOMView like any other Facet. That means you can use it within Queries:

const DOMViewSystem = () => {
    const query = useQuery((e) => e.hasAll(DOMView, Position));

    return useSystem((dt) => {
        query.loop([DOMView, Position], (e, [view, pos]) => {
            // sync DOM element's style with entity's Position
            view.element.style.left = `${pos.location.x}px`;
            view.element.style.top = `${pos.location.y}px`;
        });
    });
};

In this example, we create a System to the entity's DOM position with it's Position facet by manipulating the styles of the DOMView.element.

Tip

This technique can be used to integrate @react-ecs/core with basically any alternative renderer for React. Check out @react-ecs/three for an example of this technique applied to ThreeJS