How To Setup and Use Matter.js in a React App

How To Setup and Use Matter.js in a React App

The methods require the developer to be able to make a reference to a specific module or body within the Matter.js engine. One method to achieve this is by using React's state to store objects or variables that have been declared in the initializing process, called in the componentDidMount() method.

How To Use Matter.js in a React App

The Matter.js Physics Engine can bring great possibilities to your JavaScript projects. It is useful for building games and simulations, creating user interactivity, and even adding dynamics to a static site.

“Matter.js supports all major browsers including IE8+. Additionally, it is suitable for use on mobile devices as it can detect touch and has responsiveness.”

If you are new to the library, there is a fun set of demos to try. This is a good starting point to gain inspiration for how you wish to incorporate Matter.js into your projects.

At any stage in your familiarity with Matter.js, the documentation will always be a reliable resource.

How Can It Be Used in React?

To give credit where credit is due, there is an example on CodeSandbox that demonstrates the solution well.

This guide will explain the solution to make the code reusable, and also provide some additional insight for how the built-in methods of the Matter.js library can be used in React.

Looking at the example

All the necessary code is in the Scene.js component:

import React from "react";
import ReactDOM from "react-dom";
import Matter from "matter-js";

class Scene extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    var Engine = Matter.Engine,
      Render = Matter.Render,
      World = Matter.World,
      Bodies = Matter.Bodies,
      Mouse = Matter.Mouse,
      MouseConstraint = Matter.MouseConstraint;

    var engine = Engine.create({
      // positionIterations: 20
    });

    var render = Render.create({
      element: this.refs.scene,
      engine: engine,
      options: {
        width: 600,
        height: 600,
        wireframes: false
      }
    });

    var ballA = Bodies.circle(210, 100, 30, { restitution: 0.5 });
    var ballB = Bodies.circle(110, 50, 30, { restitution: 0.5 });
    World.add(engine.world, [
      // walls
      Bodies.rectangle(200, 0, 600, 50, { isStatic: true }),
      Bodies.rectangle(200, 600, 600, 50, { isStatic: true }),
      Bodies.rectangle(260, 300, 50, 600, { isStatic: true }),
      Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
    ]);

    World.add(engine.world, [ballA, ballB]);

    // add mouse control
    var mouse = Mouse.create(render.canvas),
      mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
          stiffness: 0.2,
          render: {
            visible: false
          }
        }
      });

    World.add(engine.world, mouseConstraint);

    Matter.Events.on(mouseConstraint, "mousedown", function(event) {
      World.add(engine.world, Bodies.circle(150, 50, 30, { restitution: 0.7 }));
    });

    Engine.run(engine);

    Render.run(render);
  }

  render() {
    return <div ref="scene" />;
  }
}
export default Scene;

The componentDidMount() method contains the methods for initializing and rendering the Matter.js content. The source code files for all of the demos display the rendering process well.

This entire method can also be extracted as a helper method if desired. The essential piece to React integration is providing a ref on a JSX element in the return statement of the class component:

This ref is then specified as the element property of the Matter.Render() method within the componentDidMount():

It is important to create this association when using React, because otherwise, the scene will automatically create an element, which may be difficult to use in a React JSX return statement. (It certainly could be possible, though.)

element property in the Matter.Render() method

That covers the essentials for getting a minimally viable Matter.js product up and running with React!

Taking It a Step Further

Matter.js has lots of built-in methods for manipulating properties within the various modules. The methods require the developer to be able to make a reference to a specific module or body within the Matter.js engine.

One method to achieve this is by using React’s state to store objects or variables that have been declared in the initializing process, called in the componentDidMount() method.

For example, at the end of the the componentDidMount(), we can call a setState(). It might look like:

this.setState({
    render: render
})

By setting the render object in state, it can be used to reference the various modules. We can inspect the component using React Developer Tools and learn where the various parts are located:

Working our way down to the bodies key, we have access to the bodies within the render. So, if we wanted to remove a body from the scene, we can write something like:

const world = this.state.render.engine.world
const body = world.bodies[0]

Matter.World.remove(world, body)

We have now called a built-in method, Matter.World.remove by passing in two state-referenced objects as the arguments.

Matter.World.remove method

Takeaways

The Matter.js Physics Engine can be implemented into React with only a little bit of React knowledge. You don’t even have to be a physicist to use it!

An advantage of using React Developer Tools is the visualization aspect of learning the Matter.js library. It sort of serves as a condensed form of the codebase.

By spending some time investigating this object, you’ll be sure to learn lots about Matter.js.

The end. Thank you for reading !

React JavaScript Programming Front End Development Webdev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Top 6 Productivity Tools for Front-end Developers

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer. 6 tools to increase your productivity as a Front-end developer.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...