https://github.com/dustinlacewell/react-ecs
An entity-component-system for React
https://github.com/dustinlacewell/react-ecs
ecs entity-component react react-ecs
Last synced: about 1 year ago
JSON representation
An entity-component-system for React
- Host: GitHub
- URL: https://github.com/dustinlacewell/react-ecs
- Owner: dustinlacewell
- License: mit
- Created: 2021-04-06T20:25:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-18T18:40:46.000Z (almost 3 years ago)
- Last Synced: 2025-06-03T02:14:56.935Z (about 1 year ago)
- Topics: ecs, entity-component, react, react-ecs
- Language: TypeScript
- Homepage: https://react-ecs.ldlework.com/
- Size: 11.5 MB
- Stars: 127
- Watchers: 6
- Forks: 18
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React ECS
react-ecs.ldlework.com
A declarative Entity Component System for React.
An **ECS**, or _Entity Component System_ is a design pattern popular in simulations, visualizations and game-development. It eschews rich objects and complex inheritence hierarchies.
Instead:
- **Entities**: A simple bag of facets.
- **Facets**: Simple data-only objects.
- **Queries**: Track entities which have specific facets.
- **Systems**: Process the facets of entities matched by queries.
[React ECS](https://react-ecs.ldlework.com/) helps you build your simulations and games using this pattern, in standard React JS fashion (hooks, components, etc)
# What does it look like?
Let's make a simple simulation that updates a cube based on a Spinning facet, using React ECS' ThreeJS integration @react-ecs/three.
## First define a Facet
This facet just tracks how much its entity should spin.
```tsx
class Spin extends Facet {
amount? = new Vector3(1, 1, 1);
}
```
## Then define a System
Systems use queries to track the entities they work upon.
This system uses a query to find entities with both the `ThreeView` and `Spin` facets. `ThreeView` is facet provided by [@react-ecs/three](https://react-ecs.ldlework.com/docs/three) to visually display entities in a [ThreeJS](https://threejs.org/) scene.
This system updates the entity's 3D rotation based on the `Spin` facet:
```tsx
const SpinSystem = () => {
const query = useQuery((e) => e.hasAll(ThreeView, Spin));
return useSystem((dt) => {
query.loop([ThreeView, Spin], (e, [view, spin]) => {
const rot = view.object3d.rotation;
rot.x += spin.amount.x * dt;
rot.y += spin.amount.y * dt;
rot.z += spin.amount.z * dt;
});
});
};
```
## Now put it all together
Now we can create a component to tie it all together. For more information see our [documentation](https://react-ecs.ldlework.com/docs/) and [examples](https://react-ecs.ldlework.com/examples/).
```tsx
const CoolSim = () => {
const ECS = useECS()
useAnimationFrame(ECS.update)
return (
)
}
```
[](https://codesandbox.io/s/react-ecs-demo-tv5xj?fontsize=14&hidenavigation=1&theme=dark)