👉@dpapi/react

Bring multiplayer to your React JS app

Install Package

npm install --save @dpapi/react

RoomProvider

A room is the space where people can join and start collaborating together.

RoomProvider is used to create context and make it available to all child components in the React component tree hierarchy. This provides a socket connection to all components that are wrapped in it.

Index.js

import React from "react";
import ReactDOM from "react-dom";
import {RoomProvider} from "@dpapi/react";

const rootElement = document.getElementById("root");

ReactDOM.render(
    <RoomProvider>
        <App />
    </RoomProvider>, 
    roomElement
);

clientSocket

clientSocket is to declare the socket connection that is passed down to all child components within the room. This connection is further used to bring the multiplayer functionalities in this room.

Create a socket instance by passing clientSocket in useContext.

App.js

import {useContext} from "react";
import {clientSocket} from "@dpapi/react";

function App() {
  const socket = useContext(clientSocket);
  // 
  // Add your JavaScript code here 👈
  //
  return (
    // Add your JSX / HTML code to render 👈
  );
}

export default App;

joinRoom

Function that enables a client to join the virtual room. Automatically communicate updates to the current user’s presence and cursor movements.

This function takes two arguments - room-id and socket connection.

App.js

import {useContext} from "react";
import {clientSocket, joinRoom} from "@dpapi/react";

function App() {
  const socket = useContext(clientSocket);
  joinRoom("room-id",socket);
  // 
  // Add your JavaScript code here 👈
  //
  return (
    // Add your JSX / HTML code to render 👈
  );
}

export default App;

Ensure that joinRoom function is called before the other multiplayer functionalities of roomCount and liveCursors.

However, you will need to initiate the clientSocket connection before joining a room.

roomCount

Function used to subscribe to the presence of other users in the room.

This function takes two arguments - room-id and socket connection.

App.js

import {useContext} from "react";
import {clientSocket, joinRoom, roomCount} from "@dpapi/react";

function App() {
  const socket = useContext(clientSocket);
  joinRoom("room-id",socket);
  const userCount = roomCount("room-id",socket);
  // 
  // Add your JavaScript code here 👈
  //
  return (
    <div className="App"> // ❗ Remember to add a CSS file
      Number of users in the room: {usersCount}
    // Add your JSX / HTML code to render 👈
    </div>
  );
}

export default App;

liveCursors

Function to set and update cursor movements of all users in the room.

This function takes two arguments - room-id and socket connection.

App.js

import {useContext} from "react";
import {clientSocket, joinRoom, liveCursors} from "@dpapi/react";

function App() {
  const socket = useContext(clientSocket);
  joinRoom("room-id",socket);
  const cursors = liveCursors("room-id", socket);
  // 
  // Add your JavaScript code here 👈
  //
  return (
    <div className="App"> // ❗ Remember to add a CSS file
      {cursors.map((cursor, index) => {
        if (cursor.socketId !== socket.id) {
          return (
            <div
              key={cursor.socketId || index}
              className="other-cursor" // ❗ Style your cursors with CSS
              style={{
                left: cursor.x,
                top: cursor.y,
              }}
            />
          );
        } else {
          return null;
        }
      })}
      // Add your JSX / HTML code to render 👈
    </div>
  );
}

export default App;

Your app is now multiplayer 🎉