Customize Behavior
import { VeltPresence } from '@veltdev/react';
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
if (client) {
const presenceElement = client.getPresenceElement();
// Pass in the user ID of the user you want to follow
presenceElement.startFollowingUser(userId);
// Stop following the user
presenceElement.stopFollowingUser();
}
}, [client]);
const navigate = useNavigate();
return (
<div className="toolbar">
<VeltPresence
flockMode={true}
onNavigate={(pageInfo) => navigate(pageInfo.path)} {/* 1) Enable Custom Navigation */}
defaultFlockNavigation={true} {/* 2) Disable Default Follow Me Navigation */}
/>
</div>
);
}
React / Next.js
HTML
Enable custom navigation
Use a callback for custom navigation or side-effects.
When the leader of a Follow Me session navigates, we can use the React Router to update the follower’s position. In the callback you will receive a PageInfo object.
<VeltPresence onNavigate={(pageInfo) => navigate(pageInfo.path)} />
PageInfo
| property | type | description |
|---|---|---|
baseUrl | string | The base URL of the site |
path | string | The path after the base URL |
url | string | The full URL |
Disable default Follow Me navigation
Disable default Follow Me navigation.
Default: true
Our default navigation uses window.location.href to detect navigation. If you are handling navigation using the callback method above, you should disable our default navigation.
<VeltPresence defaultFlockNavigation={true} />
Start or Stop Following a User
You can start or Stop Following a User by calling the startFollowingUser() and stopFollowingUser() methods within a useEffect() hook.
Start Following
Start following a user by passing in their user ID to the startFollowingUser() method.
You can programatically start a Follow Me session by passing in the user ID of the user you want to lead the session.
// Stop following the user
presenceElement.startFollowingUser(userId);
Stop Following
Stop Follow Me session for the current user by by calling the stopFollowingUser() method.
If the current user is in a Follow Me session, they will be removed from that session. If there are no more followers in the session, the session will be destroyed.
// Stop following the user
presenceElement.stopFollowingUser();
import { VeltPresence } from '@veltdev/react';
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
if (client) {
const presenceElement = client.getPresenceElement();
// Pass in the user ID of the user you want to follow
presenceElement.startFollowingUser(userId);
// Stop following the user
presenceElement.stopFollowingUser();
}
}, [client]);
const navigate = useNavigate();
return (
<div className="toolbar">
<VeltPresence
flockMode={true}
onNavigate={(pageInfo) => navigate(pageInfo.path)} {/* 1) Enable Custom Navigation */}
defaultFlockNavigation={true} {/* 2) Disable Default Follow Me Navigation */}
/>
</div>
);
}