# @dpapi/react ### Install Package ```javascript 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.

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`.

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.

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;

{% hint style="warning" %} 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. {% endhint %} ### roomCount Function used to subscribe to the presence of other users in the room. This function takes two arguments - `room-id` and `socket` connection.

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.

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 🎉** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://dpapi.gitbook.io/docs-dpapi-mutliplayer/api-reference/dpapi-react.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.