Simple collision detection for web-based games using React.js

If you're building a game or game-like interface using React.js, you may encounter a need for collision detection. react-collision-provider simplifies the detection of overlapping DOM elements in your web app.

Register objects for collision detection by wrapping them in CollisionProvider:

<CollisionProvider  
   itemId="hero"
   size={{width: 50, height: 50}}
   initialPosition={{x: 0, y: 0}}
   component={Mario}
/>
<CollisionProvider  
   itemId="enemy"
   size={{width: 50, height: 50}}
   initialPosition={{x: 60, y: 60}}
   component={Bowser}
/>

CollisionProvider decorates Mario with a function prop that he can use to listen for collisions.

class Mario extends React.Component {  
  componentDidMount() {
     this.props.onCollision(otherObject => {
         console.log(`Mario collided with
          ${otherObject.itemId}!`);
     });
  }
}

In addition, Mario receives a method for notifying the collision library of his position:

class Mario extends React.Component {  
...
   onMouseMove(event) {
      this.props.updatePosition({
          x: event.clientX,
          y: event.clientY
      });
   }
}

react-collision-provider could infer the position of DOM elements by watching them, but I decided against this for performance reasons.

Check out this other example, and feel free to create an issue on GitHub if you have questions, comments or ideas.