LiveKit docs › Hooks › useFocusToggle

---

# 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

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

```

## Usage

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

```

## Properties

- **`{ trackRef, props }.props`** _(React.ButtonHTMLAttributes<HTMLButtonElement>)_: 

- **`{ trackRef, props }.trackRef`** _(TrackReferenceOrPlaceholder)_ (optional): 

## Returns

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

```

---

This document was rendered at 2026-06-07T11:32:19.231Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/hook/usefocustoggle.md](https://docs.livekit.io/reference/components/react/hook/usefocustoggle.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).