BoardKitFrontend
useFollowMode
Follow another participant's viewport in real-time
useFollowMode lets the local user follow another participant's viewport. The viewport smoothly pans to center the followed user's cursor position.
Signature
function useFollowMode(): UseFollowModeResult;Return Type
interface UseFollowModeResult {
followingUserId: string | null;
follow: (userId: string) => void;
unfollow: () => void;
isFollowing: boolean;
}| Property | Description |
|---|---|
followingUserId | ID of the user being followed, or null |
follow | Start following a user by their ID |
unfollow | Stop following |
isFollowing | true if currently following someone |
Usage
import { useFollowMode, usePresence } from '@hfu.digital/boardkit-react';
function FollowButton() {
const { participants } = usePresence();
const { followingUserId, follow, unfollow, isFollowing } = useFollowMode();
return (
<div>
{participants.map((p) => (
<button
key={p.userId}
onClick={() =>
followingUserId === p.userId ? unfollow() : follow(p.userId)
}
>
{followingUserId === p.userId ? 'Unfollow' : `Follow ${p.displayName}`}
</button>
))}
{isFollowing && <span>Following...</span>}
</div>
);
}Behavior
- Uses
requestAnimationFramefor smooth viewport tracking - Applies linear interpolation (lerp = 0.1) for gradual panning
- Only updates if the movement delta exceeds 0.5 pixels (prevents jitter)
- Automatically unfollows if the followed user disconnects (cursor removed from store)