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

export default function App() {
  const presenceUsers = usePresenceUsers()

  return (
    <div>
      Presence Users: {presenceUsers.length}
      {
        presenceUsers.map( x => <div>{x.name} </div>)
      }
    </div>
  );
}
1

Get the usePresenceUsers Hook

Import the usePresenceUsers hook.

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

const presenceUsers = usePresenceUsers()
2

Display Presence Users List with your own UI

The usePresenceUsers hook will return an array of User objects.

You can map the Presence Users List to generate your own custom UI.

return (
  <div>
    Presence Users: {presenceUsers.length}
    {
      presenceUsers.map( x => <div>{x.name} </div>)
    }
  </div>
)

The hook will automatically unsubscribe from the subscription when the component dismounts.

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

export default function App() {
  const presenceUsers = usePresenceUsers()

  return (
    <div>
      Presence Users: {presenceUsers.length}
      {
        presenceUsers.map( x => <div>{x.name} </div>)
      }
    </div>
  );
}

Was this page helpful?

VariablesSlots