FocusRing

FocusRing is a simple wrapper around the @react-aria/focus's FocusRing component, with added styles for focus indication. It can be used to wrap any interactive element that needs a custom focus indicator.

Importing

import { FocusRing } from '@ef-global/backpack/FocusRing';

Props

Property	Type	Required	Description
children	React.ReactElement	Yes	A single React element that will be wrapped with the custom focus ring indicator.
className	string	No	Optional additional CSS class to be applied to the focus ring.

Usage

To use the FocusRing component, simply import it and wrap the element that requires the custom focus indicator. Here's an example:

function MyComponent() {
  return (
    <FocusRing>
      <Button>Click me!</Button>
    </FocusRing>
  );
}

In the example above, a Button component is wrapped with the FocusRing to provide a custom focus indicator when the button is focused.

Flag Wrapper Headline