Customize Behavior
import { VeltPresence } from '@veltdev/react';
export default function App() {
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 */}
/>
</div>
);
}
React / Next.js
HTML
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.
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.
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} />
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.
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)} />
import { VeltPresence } from '@veltdev/react';
export default function App() {
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 */}
/>
</div>
);
}