# useFocus

Opens the floating element while the reference element has focus,
like CSS `:focus`.

```js
import {useFocus} from '@floating-ui/react';
```

## Usage

This hook is an interaction hook that returns event handler
props.

To use it, pass it the `context{:.const}` object returned from
`useFloating(){:js}`, and then feed its result into the
`useInteractions(){:js}` array. The returned prop getters are
then spread onto the elements for rendering.

```js {9-13} /context/
function App() {
  const [isOpen, setIsOpen] = useState(false);

  const {refs, floatingStyles, context} = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
  });

  const focus = useFocus(context);

  const {getReferenceProps, getFloatingProps} = useInteractions([
    focus,
  ]);

  return (
    <>
      <div ref={refs.setReference} {...getReferenceProps()}>
        Reference element
      </div>
      {isOpen && (
        <div
          ref={refs.setFloating}
          style={floatingStyles}
          {...getFloatingProps()}
        >
          Floating element
        </div>
      )}
    </>
  );
}
```

## Props

```ts
interface Props {
  enabled?: boolean;
  visibleOnly?: boolean;
}
```

### enabled

default: `true{:js}`

Conditionally enable/disable the hook.

```js
useFocus(context, {
  enabled: false,
});
```

### visibleOnly

default: `true{:js}`

Whether the open state only changes if the `focus{:.string}`
event is considered visible (`:focus-visible` CSS selector).

```js
useFocus(context, {
  visibleOnly: false,
});
```