useFocusToggle
function useFocusToggle(options): {
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: (event) => void;
};
inFocus: boolean;
};Defined in: packages/react/src/hooks/layout/useFocusToggle.ts:35
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.
Parameters
| Parameter | Type |
|---|---|
options | UseFocusToggleOptions |
Returns
{
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: (event) => void;
};
inFocus: boolean;
}mergedProps
mergedProps: ButtonHTMLAttributes<HTMLButtonElement> & {
className: string;
onClick: (event) => void;
};Type Declaration
className
className: string;onClick
onClick: (event) => void;Parameters
| Parameter | Type |
|---|---|
event | MouseEvent<HTMLButtonElement, MouseEvent> |
Returns
void
inFocus
inFocus: boolean;Example
// Basic — wire focus behavior onto a button.
const { mergedProps, inFocus } = useFocusToggle({ trackRef, props: yourButtonProps });
return <button {...mergedProps}>{inFocus ? "Unfocus" : "Focus"}</button>;
// Advanced — focus a screen share tile from a custom control.
function FocusShareButton({ trackRef }: { trackRef: TrackReferenceOrPlaceholder }) {
const { mergedProps, inFocus } = useFocusToggle({
trackRef,
props: { type: "button", className: "focus-share" },
});
return <button {...mergedProps}>{inFocus ? "Pinned" : "Pin screen"}</button>;
}