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

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

propertytypedescription
baseUrlstringThe base URL of the site
pathstringThe path after the base URL
urlstringThe full URL
2

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

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.

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