@react-aria/focus

useFocusRing

The `useFocusRing` hook provides a way to apply focus styles to an element when it is focused. It returns properties to spread on the element and a boolean indicating if the focus is visible.

import { useFocusRing } from '@react-aria/focus';

function MyComponent() {
  let { isFocusVisible, focusProps } = useFocusRing();
  return (
    <button {...focusProps} style={{ outline: isFocusVisible ? '2px solid blue' : 'none' }}>
      Click me
    </button>
  );
}

FocusScope

The `FocusScope` component manages focus within a contained area. It ensures that focus stays within the scope and can restore focus to the previously focused element when the scope is unmounted.

import { FocusScope } from '@react-aria/focus';

function MyComponent() {
  return (
    <FocusScope contain restoreFocus autoFocus>
      <input placeholder="First input" />
      <input placeholder="Second input" />
    </FocusScope>
  );
}

useFocusWithin

The `useFocusWithin` hook provides a way to detect if any element within a container has focus. It returns properties to spread on the container and a boolean indicating if focus is within the container.

import { useFocusWithin } from '@react-aria/focus';

function MyComponent() {
  let { isFocusWithin, focusWithinProps } = useFocusWithin();
  return (
    <div {...focusWithinProps} style={{ border: isFocusWithin ? '2px solid green' : 'none' }}>
      <input placeholder="Focus within me" />
    </div>
  );
}