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

export default function App() {

  const { client } = useVeltClient();

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

  return (
    <div className="toolbar">
      <VeltPresence
        flockMode={true}
      />
    </div>
  );
}
  • React

  • Next.js

  • HTML

1) Get the Velt client

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

2) Create a useEffect hook

Create an effect with the client as a dependency.

Make sure to check if the client is null or undefined before you use it.

3 )Start following a user

Start following a user by passing in their user ID.

You can programatically start a flock session by passing in the user ID of the user you want to lead the session.

4 )Stop following

Stop flock session for the current user.

If the current user is in a flock session, they will be removed from that session. If there are no more followers in the session, the session will be destroyed.

Was this page helpful?