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