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

export default function App() {
  let client = useVeltClient()

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


  useEffect(() => {
    if(client){
      const presenceElement = client.getPresenceElement();
      presenceElement.enableSelf(); // 7
      presenceElement.disableSelf(); // 7
    }

  })

  return (
    <div className="toolbar">
      <VeltPresence
        inactivityTime={30000} {/* 1) Set inactivity time */}
        location={{page: 1}} {/* 2) Add Presence to a Location */}
        maxUsers={3} {/* 3) Set max users */}
        flockMode={true} {/* 4) Enable Flock Mode */}
        onPresenceUserChange={(presenceUsers) => yourMethod(presenceUsers)} {/* 5) Subscribe to changes in User Presence */}
        darkMode={true} {/* 6) Dark Mode */}
        self={false} {/* 7) Disclude Self in list of Presence Users */}
        onPresenceUserClick={(user) => onPresenceUserClickEvent(user)} {/* 8) Handle Presence User Click Events */}
      />
    </div>
  );
}
1

Set inactivity time

Set the time it takes for a User to go inactive in milliseconds.

Default: 300000ms (5 min)

<VeltPresence inactivityTime={30000} />

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.

2

Add Presence to a Location

Show Presence on a Location.

Set the location attribute on the Presence element. When there are Users at that location, their avatars will show in this Presence element.

<VeltPresence location={{page: 1}}/>

Eg: For a Presentation tool, you can add Presence component at the main document level and add another Presence component on the slide thumbnails. This will render avatars at both presentation level & slide thumbnail level. For slide thumbnails, it will only show Users active on that slide.

3

Set max users

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} />
4

Enable Follow Me Mode

To enable Follow Me Mode, set the flockMode attribute to true.

<VeltPresence flockMode={true} />

This will enable Follow Me mode as an option for your Users globally, wherever Presenceis shown. To start the shared flock session, click on a User's avatar to start following them.

Learn more about it in the Flock Mode feature section.

5

Subscribe to changes in User Presence

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)} />
6

Dark Mode

Whether dark mode is enabled.

Default: false

<VeltPresence darkMode={true} />
7

Include Self in List of Presence Users

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();
8

Handle Presence User Click Events

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)} />