setInactivityTime

  • Set the time it takes for a User to go inactive in milliseconds.
  • By default we mark a User as inactive if they do not take any action on the document within a 5 mins timeframe.
  • If they unfocus the tab, we mark them inactive immediately.

Default: 300000ms (5 min)

<VeltPresence inactivityTime={30000} />

Using API:

const presenceElement = client.getPresenceElement();
presenceElement.setInactivityTime(30000);

locationId

  • Renders the Presence avatar if any user is active on the given locationId.
<VeltPresence locationId={"YOUR_LOCATION_ID"} />

maxUsers

  • Set how many Presence avatars to display at a time.
  • You can set this via the maxUsers attribute. Any extra avatars will be hidden and shown in an avatar which indicates the number of extra Users.

<VeltPresence maxUsers={3} />

onPresenceUserChange

  • Whenever the Presence for any User changes, we emit this event with the updated list of Users currently online on this document.
<VeltPresence onPresenceUserChange={(presenceUsers) => yourMethod(presenceUsers)} />

self

  • Whether to include yourself in the list of Presence users.
  • Default: true

<VeltPresence self={false} />

API Method:

const presenceElement = client.getPresenceElement();
presenceElement.enableSelf();
presenceElement.disableSelf();

onPresenceUserClick

  • To handle click events on Presence avatar circles, pass an event handler to the onPresenceUserClick event.

const onPresenceUserClickEvent = (user) => {
  console.log("Clicked presence user: ", user);
}
	
<VeltPresence onPresenceUserClick={(user) => onPresenceUserClickEvent(user)} />

getOnlineUsersOnCurrentDocument

  • Subscribe to a list of all online users who are either active or inactive on the current document.

Using Hooks:

const presenceUsers = usePresenceUsers();

useEffect(() => {
    if (presenceUsers) {
      console.log("Online users: ", presenceUsers);
    }
  }, [presenceUsers]);

Using API:

const presenceElement = usePresenceUtils();
useEffect(() => {
    if (presenceElement) {
      presenceElement.getOnlineUsersOnCurrentDocument().subscribe((presenceUsers) => {
        console.log("Online users: ", presenceUsers);
      });
    }
  }, [presenceElement]);