formidablelabs/react-game-kit

React Game Kit is a set of building blocks for making games using React, the popular JavaScript library, and React Native, which targets phones and tablets. Rather than writing game logic from scratch, you build your game by nesting components the same way you would build any other React interface. The library is now archived, meaning the original maintainers are no longer adding features or responding to issues, though the code remains available. The core idea is a hierarchy of components, each responsible for one part of a running game. At the top sits the Loop component, which drives the game tick: a repeating cycle that updates everything on screen. Nested inside that is the Stage component, which tracks the game's base dimensions and provides a scale value so that everything inside can size itself proportionally, letting your game adjust to different screen sizes. If you want objects to collide and react physically, you add the World component. It sets up a physics simulation using a library called Matter.js and lets you configure things like gravity. Inside World, you place Body components to define the shapes that participate in the simulation, such as a rectangle acting as the floor or a circle representing a ball. You can read each body's position on every tick and draw your graphics accordingly. For drawing animated characters or objects, the Sprite component handles sprite sheets, which are image files where each row represents a different animation state and each column is a frame of that animation. You tell it how many frames each animation has and how fast to cycle through them. For level design, the TileMap component lets you paint a grid from a tile atlas image, giving you a way to build rooms or terrain out of repeating pieces. The library works on both web and mobile, with the note that audio playback and keyboard input are not available on the mobile path. Installation is through npm. Because the project is archived, teams starting new games today would likely want to evaluate other options or plan to maintain their own fork.