Live cursors using presence

On the previous page we learned to update presence with our cursor location—let’s use it to render live cursors.

Getting others’ presence

Switch to Room.tsx and add the imported useOthers hook to your component.

// Get list of other usersconst others = useOthers();

useOthers returns a list of information about the other users currently online, such as presence. For example, you can find the first other user’s cursor position here:

// { cursor: null }others[0].presence;

Rendering the cursors

To render the cursors, we first need a cursor component. If you look inside Cursor.tsx you’ll find a simple component that does this using x and y coordinates.

<Cursor x={141} y={252} />

To draw them, we can map through others, filtering for any cursors that are equal to null (therefore off-screen), and render each on-screen cursor. Switch back to Room.tsx and return the following code.

return (  <div    style={{ width: "100vw", height: "100vh" }}    onPointerMove={handlePointerMove}    onPointerLeave={handlePointerLeave}  >    Cursor: {JSON.stringify(myPresence.cursor)}    {others      .filter((other) => other.presence.cursor !== null)      .map(({ connectionId, presence }) => (        <Cursor          key={connectionId}          x={presence.cursor.x}          y={presence.cursor.y}        />      ))}  </div>);

After adding this, hover over the preview windows to see functioning live cursors!

Throttle rate

We can actually make these cursors even smoother, by requesting Liveblocks send more frequent updates. We can do this in liveblocks.config.ts by adding the throttle property to the client.

const client = createClient({  publicApiKey: "",  throttle: 16,});

Other uses

Presence isn’t only used for cursors, there are also a number of other different applications such as:

• Online avatars
• Selection or location indicators
• “User currently typing...” messages