> For the complete documentation index, see [llms.txt](https://dpapi.gitbook.io/docs-dpapi-mutliplayer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dpapi.gitbook.io/docs-dpapi-mutliplayer/api-reference/dpapi-react.md). # @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 πŸŽ‰**