useFocusToggle

The useFocusToggle hook is used to implement the FocusToggle or your custom implementation of it. The TrackReferenceOrPlaceholder is used to register a onClick handler and to identify the track to focus on.

Import

import { useFocusToggle } from "@livekit/components-react";

Usage

const { mergedProps, inFocus } = useFocusToggle({ trackRef, props: yourButtonProps });
return <button {...mergedProps}>{inFocus ? "Unfocus" : "Focus"}</button>;

Properties

{ trackRef, props }.propsReact.ButtonHTMLAttributes<HTMLButtonElement>Required

{ trackRef, props }.trackRefTrackReferenceOrPlaceholderOptional

Returns

{
    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
        className: string;
        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    };
    inFocus: boolean;
}