🏁Quick Start

Get started now with your React app

In this guide, we will demonstrate how to add collaboration to your React app using the DPAPI custom hooks. These hooks are part of @dpapi/react, a package enabling multiplayer experiences in a matter of minutes.

Configure DPAPI Multiplayer

Install packages

Run the following command to install the DPAPI packages:

npm install --save @dpapi/server @dpapi/react

Connect to DPAPI servers

Create a client that will be responsible to communicate with DPAPI server

import {createClient} from '@dpapi/server'

const client = createClient({
    pk_APIkey = "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",
});

Currently, this feature is unavailable and you do not require to call this package to connect to our servers. In the future, you would require your own API key to connect to our DPAPI servers.

Connect to a DPAPI room

DPAPI uses the concept of rooms, separate virtual spaces where people can collaborate. To create a multiplayer experience, multiple users must be connected to the same room.

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.

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
);

Get other users in the room

Now that the provider is set up, we can start using the DPAPI hooks. First we’ll add roomCount, a hook that provides us information about which other users are connected to the room.

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;

Get live cursors in the room

We can add the liveCursors hook to share this information in real-time, and in this case, update the current user cursor position.

App.js

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

function App() {
  const socket = useContext(clientSocket);
  joinRoom("room-id",socket);
  const userCount = roomCount("room-id",socket);
  const cursors = liveCursors("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}
      {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;