# useFocus
Opens the floating element while the reference element has focus,
like CSS `:focus`.
```js
import {useFocus} from '@floating-ui/react';
```
To manage focus within the floating element itself, use
[`FloatingFocusManager`](/docs/FloatingFocusManager).
@floating-ui/react only
## Usage
This Hook 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 (
<>
Reference element
{isOpen && (
Floating element
)}
);
}
```
## Props
```ts
interface UseFocusProps {
enabled?: boolean;
visibleOnly?: boolean;
}
```
### `enabled{:.key}`
default: `true{:js}`
Conditionally enable/disable the Hook.
```js
useFocus(context, {
enabled: false,
});
```
### `visibleOnly{:.key}`
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,
});
```