> 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/quick-start.md).

# 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`](/docs-dpapi-mutliplayer/api-reference/dpapi-react.md), 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

<pre class="language-javascript" data-line-numbers><code class="lang-javascript">import {createClient} from '@dpapi/server'

const client = createClient({
    pk_APIkey = "<a data-footnote-ref href="#user-content-fn-1">pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx</a>",
});
</code></pre>

{% hint style="info" %}
Currently, this feature is <mark style="color:green;">`unavailable`</mark> 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.
{% endhint %}

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

[<mark style="color:purple;">`RoomProvider`</mark>](https://dpapi.gitbook.io/docs-dpapi-mutliplayer/api-reference/dpapi-react#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.<br>

{% code title="" lineNumbers="true" %}

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

{% endcode %}

## 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`](https://dpapi.gitbook.io/docs-dpapi-mutliplayer/api-reference/dpapi-react#roomcount), a hook that provides us information about which *other* users are connected to the room.

{% code title="App.js" lineNumbers="true" %}

```javascript
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;
```

{% endcode %}

## Get live cursors in the room

We can add the [`liveCursors`](https://dpapi.gitbook.io/docs-dpapi-mutliplayer/api-reference/dpapi-react#livecursors) hook to share this information in real-time, and in this case, update the current user cursor position.

{% code title="App.js" lineNumbers="true" %}

```javascript
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;
```

{% endcode %}

[^1]: Send us a request to generate your own API key.