import { useVeltClient } from '@veltdev/react';
import {useEffect} from 'react';

export default function App() {
  const { client } = useVeltClient();

  useEffect(() => {
    if (client) {

      const presenceElement = client.getPresenceElement();

      presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
        // Take users list data and render your own component
      });

    }
  }, [client]);

  return (
    <div className="toolbar">
      // example of rendering your own component
      // presenceUsers.map((presenceUser) => { return ( <div key={presenceUser.userId}> {/* Add custom UI code here */} </div> ) })
    </div>
  );
}

  • React / Next.js

  • HTML

1

Get the Velt client

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();
2

Create a useEffect hook

Create an effect with the client as a dependency.

Make sure to check if the client is null or undefined before you use it.

React
useEffect(() => {
    if (client) {

      //...
    }
  }, [client]);
3

Subscribe to Presence users

Subscribe to the realtime Presence users data on the current document and location.

We will send you a new list of users everytime there is a change in the status of any user, so you can build out your own Presence UI.

React
useEffect(() => {
    if (client) {

      const presenceElement = client.getPresenceElement();

      presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
        // Take user list data and render your own component
      });

    }
  }, [client]);

Was this page helpful?

VariablesOverview