@react-lit/focus-scope
TypeScript icon, indicating that this package has built-in type declarations

0.7.0 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @react-lit/focus-scope

Weekly Downloads

1

Version

0.7.0

License

MIT

Unpacked Size

20.5 kB

Total Files

7

Last publish

Collaborators

  • joelvoss