@react-lit/focus-scope
FocusScope manages focus for its descendants. It supports containing focus inside the scope, restoring focus to the previously focused element on unmount, and auto focusing children on mount.
Installation
$ npm i @react-lit/focus-scope
# or
$ yarn add @react-lit/focus-scope
Example
import * as React from 'react',
import { FocusScope } from '@react-lit/focus-scope';
function Example() {
const [isOpen, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{isOpen && (
<FocusScope>
<input aria-label="First input" placeholder="First input" />
<input aria-label="Second input" placeholder="Second input" />
<button onClick={() => setOpen(false)}>Close</button>
</FocusScope>
)}
</>
);
}
Development
(1) Install dependencies
$ npm i
# or
$ yarn
(2) Run initial validation
$ ./Taskfile.sh validate
(3) Run tests in watch-mode to validate functionality.
$ ./Taskfile test -w
This project was set up by @jvdx/core