open-index/open-npm huggingface dataset:
npm package: @reable/ems-design-system
Description: @reable/ems-design-system
Author: Jaeha Lee
Latest version: 0.0.17

# @reable/ems-design-system

## reable ems 디자인 시스템 라이브러리입니다.

# Reable BEMS Design System

### Installation

```shell
$ npm install @reable/ems-design-system
# or
$ yarn add @reable/ems-design-system
```

### **Getting started**

To start using the components, first wrap your application in a provider provided by **@reable/ems-design-system**

```tsx
import { ReableEMSProvider } from '@reable/ems-design-system';

const App = ({ children }) => {
  return <ReableEMSProvider>{children}</ReableEMSProvider>;
};
```

After adding the provider, now you can start using components like this.

```tsx
import { Button } from '@reable/ems-design-system';

function App() {
  return (
    <Button variant="primary" size="lg">
      Hello World
    </Button>
  );
}
```

### Links

- [storybook](https://6663e874b3049ef0a2884f7c-nprzxygixy.chromatic.com/)
npm package: @reach-labs/nextjs-pipeline-cdk
Description: AWS CDK utility for creating a pipeline for a serverless nextjs application
Latest version: 0.2.0

# Opinionated AWS CDK codepipeline setup for a serverless-next.js application

#### Requirements:
- Code repository must be on AWS CodeCommit.
- NextJS 11.
- Peer dependencies (only required to install manually if using npm version below 7):
```
npm install --save --save-exact @aws-cdk/core@1.118.0 @aws-cdk/aws-codecommit@1.118.0 @aws-cdk/pipelines@1.118.0 @aws-cdk/aws-route53-patterns@1.118.0 @aws-cdk/aws-s3-deployment@1.118.0 @aws-cdk/aws-cloudfront-origins@1.118.0 @aws-cdk/aws-lambda-event-sources@1.118.0 @aws-cdk/aws-lambda-nodejs@1.118.0
```

#### AWS Resources created:
- AWS CodePipeline with *n* number of stages.
- Each stage deploys a stack consisting of:
  
  - Resources found in here: https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/serverless-components/nextjs-cdk-construct
  - (Optional) Cloudfront redirect.
npm package: @reach-ui-fork/accordion
Description: Accessible React accordion component
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/accordion

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/accordion.svg)](https://npm.im/@reach-ui-fork/accordion) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/accordion) | [Source](https://github.com/reach/reach-ui/tree/main/packages/accordion) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion)
npm package: @reach-ui-fork/alert
Description: Screen-reader-friendly alert messages.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/alert

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/alert.svg)](https://npm.im/@reach-ui-fork/alert) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/alert) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alert)

Screen-reader-friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.

The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screen reader on you won't notice a difference between rendering `<Alert>` vs. a `<div>`.

```jsx
function Example(props) {
	const [messages, setMessages] = React.useState([]);
	return (
		<div>
			<button
				onClick={() => {
					setMessages((prevMessages) =>
						prevMessages.concat([`Message #${prevMessages.length + 1}`])
					);
					setTimeout(() => {
						setMessages((prevMessages) => prevMessages.slice(1));
					}, 5000);
				}}
			>
				Add a message
			</button>
			<div>
				{messages.map((message, index) => (
					<Alert key={index}>{message}</Alert>
				))}
			</div>
		</div>
	);
}
```
npm package: @reach-ui-fork/alert-dialog
Description: Accessible React Alert Dialog.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/alert-dialog

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/alert-dialog.svg)](https://npm.im/@reach-ui-fork/alert-dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/alert-dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert-dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)

A modal dialog that interrupts the user's workflow to get a response, usually some sort of confirmation. This is different than a typical Dialog in that it requires some user response, like "Save", or "Cancel", etc.

Most of the time you'll use `AlertDialog`, `AlertDialogLabel`, and `AlertDialogDescription` together. If you need more control over the styling of the modal you can drop down a level and use `AlertDialogOverlay` and `AlertDialogContent` instead of `AlertDialog`.

When a Dialog opens, the _least destructive_ action should be focused so that if a user accidentally hits enter when the dialog opens no damage is done. This is accomplished with the `leastDestructiveRef` prop.

Every dialog must render an `AlertDialogLabel` so the screen reader knows what to say about the dialog. If an `AlertDialogDescription` is also rendered, the screen reader will also announce that. If you render more than these two elements and some buttons, the screen reader might not announce it so it's important to keep the content inside of `AlertDialogLabel` and `AlertDialogDescription`.

This is built on top of [@reach-ui-fork/dialog](https://reach.tech/dialog), so `AlertDialog` spreads its props and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and `AlertDialogContent` to `DialogContent`.

```jsx
function Example(props) {
	const [showDialog, setShowDialog] = React.useState(false);
	const cancelRef = React.useRef();
	const open = () => setShowDialog(true);
	const close = () => setShowDialog(false);

	return (
		<div>
			<button onClick={open}>Delete something</button>

			{showDialog && (
				<AlertDialog leastDestructiveRef={cancelRef}>
					<AlertDialogLabel>Please Confirm!</AlertDialogLabel>

					<AlertDialogDescription>
						Are you sure you want to delete something? This action is permanent,
						and we're totally not just flipping a field called "deleted" to
						"true" in our database, we're actually deleting something.
					</AlertDialogDescription>

					<div className="alert-buttons">
						<button onClick={close}>Yes, delete</button>{" "}
						<button ref={cancelRef} onClick={close}>
							Nevermind, don't delete.
						</button>
					</div>
				</AlertDialog>
			)}
		</div>
	);
}
```
npm package: @reach-ui-fork/auto-id
Description: Autogenerate IDs to facilitate WAI-ARIA and server rendering.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/auto-id

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/auto-id.svg)](https://npm.im/@reach-ui-fork/auto-id) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/auto-id) | [Source](https://github.com/reach/reach-ui/tree/main/packages/auto-id)

Autogenerate IDs to facilitate WAI-ARIA and server rendering.

A string can be supplied as an argument to be `useId` in lieu of the auto-generated ID. This is handy for accepting user-provided prop IDs that need to be deterministic.

```jsx
import { useId } from "@reach-ui-fork/auto-id";

function FormField(props) {
	const id = useId(props.id);
	return (
		<React.Fragment>
			<label htmlFor={id}>{props.label}</label>
			<input type={props.type} name={props.name} id={id} />
		</React.Fragment>
	);
}
```
npm package: @reach-ui-fork/checkbox
Description: Accessible components to build custom, tri-state checkboxes in React.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/checkbox

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/checkbox.svg)](https://npm.im/@reach-ui-fork/checkbox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/checkbox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/checkbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox)

React components to build accessible custom checkboxes with support for indeterminate (mixed) state.
npm package: @reach-ui-fork/combobox
Description: Accessible React Combobox (Autocomplete).
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/combobox

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/combobox.svg)](https://npm.im/@reach-ui-fork/combobox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/combobox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/combobox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)

Accessible combobox (autocomplete or autosuggest) component for React.

A combobox is the combination of an `<input type="text" />` and a list. The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a `<select />`, but more of an `<input type="text" />` with some suggestions. You can, however, validate that the value comes from the list, that's up to your app.

```js
import {
	Combobox,
	ComboboxInput,
	ComboboxPopover,
	ComboboxList,
	ComboboxOption,
	ComboboxOptionText,
} from "@reach-ui-fork/combobox";
import "@reach-ui-fork/combobox/styles.css";

function Example() {
	return (
		<div>
			<Combobox>
				<ComboboxInput aria-labelledby="demo" />
				<ComboboxPopover>
					<ComboboxList aria-labelledby="demo">
						<ComboboxOption value="Apple" />
						<ComboboxOption value="Banana" />
						<ComboboxOption value="Orange" />
						<ComboboxOption value="Pineapple" />
						<ComboboxOption value="Kiwi" />
					</ComboboxList>
				</ComboboxPopover>
			</Combobox>
		</div>
	);
}
```
npm package: @reach-ui-fork/dialog
Description: Accessible React Modal Dialog.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/dialog

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/dialog.svg)](https://npm.im/@reach-ui-fork/dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal)

An accessible dialog or modal window.

```jsx
import { Dialog } from "@reach-ui-fork/dialog";
import "@reach-ui-fork/dialog/styles.css";

function Example(props) {
	const [showDialog, setShowDialog] = React.useState(false);
	const open = () => setShowDialog(true);
	const close = () => setShowDialog(false);

	return (
		<div>
			<button onClick={open}>Open Dialog</button>
			<Dialog isOpen={showDialog} onDismiss={close}>
				<button className="close-button" onClick={close}>
					<VisuallyHidden>Close</VisuallyHidden>
					<span aria-hidden>×</span>
				</button>
				<p>Hello there. I am a dialog</p>
			</Dialog>
		</div>
	);
}
```
npm package: @reach-ui-fork/disclosure
Description: Accessible React disclosure component
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/disclosure

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/disclosure.svg)](https://npm.im/@reach-ui-fork/disclosure) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/disclosure) | [Source](https://github.com/reach/reach-ui/tree/main/packages/disclosure) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#disclosure)
npm package: @reach-ui-fork/dropdown
Description: React dropdown menu.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/dropdown

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/dropdown.svg)](https://npm.im/@reach-ui-fork/dropdown) ![MIT license](https://badgen.now.sh/badge/license/MIT)

A React dropdown menu.

**Important:** This package is primarily intended for internal use by the Reach UI library. You should probably not use it directly in your production projects, as the APIs can still change with minor version bumps. You have been warned!
npm package: @reach-ui-fork/listbox
Description: Accessible React listbox input.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/listbox

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/listbox.svg)](https://npm.im/@reach-ui-fork/listbox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/listbox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox)

An accessible listbox for custom select inputs.

```jsx
import * as React from "react";
import { Listbox, ListboxOption } from "@reach-ui-fork/listbox";
import "@reach-ui-fork/listbox/styles.css";

function Example(props) {
	let [value, setValue] = React.useState("default");
	return (
		<Listbox value={value} onChange={(value) => setValue(value)}>
			<ListboxOption value="default">🌮 Choose a taco</ListboxOption>
			<hr />
			<ListboxOption value="asada" valueText="Carne Asada">
				🌮 Carne Asada
			</ListboxOption>
			<ListboxOption value="pollo" valueText="Pollo">
				🌮 Pollo
			</ListboxOption>
			<ListboxOption value="pastor" valueText="Pastor">
				🌮 Pastor
			</ListboxOption>
			<ListboxOption value="lengua" valueText="Lengua">
				🌮 Lengua
			</ListboxOption>
		</Listbox>
	);
}
```
npm package: @reach-ui-fork/machine
Description: State machine utilities for the Reach UI library.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/machine

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/machine.svg)](https://npm.im/@reach-ui-fork/machine) ![MIT license](https://badgen.now.sh/badge/license/MIT)

State machine utilities for the Reach UI library.

**Important:** This package is intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can and will change often without regard to semver. You have been warned!
npm package: @reach-ui-fork/menu-button
Description: Accessible React button dropdown menu.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/menu-button

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/menu-button.svg)](https://npm.im/@reach-ui-fork/menu-button) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/menu-button) | [Source](https://github.com/reach/reach-ui/tree/main/packages/menu-button) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton)

An accessible dropdown menu for the common dropdown menu button design pattern.

```jsx
import {
	Menu,
	MenuList,
	MenuButton,
	MenuItem,
	MenuLink,
} from "@reach-ui-fork/menu-button";
import "@reach-ui-fork/menu-button/styles.css";

function Example() {
	return (
		<Menu>
			<MenuButton>
				Actions <span aria-hidden>▾</span>
			</MenuButton>
			<MenuList>
				<MenuItem onSelect={() => alert("Download")}>Download</MenuItem>
				<MenuItem onSelect={() => alert("Copy")}>Create a Copy</MenuItem>
				<MenuItem onSelect={() => alert("Mark as Draft")}>
					Mark as Draft
				</MenuItem>
				<MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
				<MenuLink as="a" href="https://reacttraining.com/workshops/">
					Attend a Workshop
				</MenuLink>
			</MenuList>
		</Menu>
	);
}
```
npm package: @reach-ui-fork/polymorphic
Description: Internal utility types for polymorphism in Reach UI.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/polymorphic

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/polymorphic.svg)](https://npm.im/@reach-ui-fork/polymorphic) ![MIT license](https://badgen.now.sh/badge/license/MIT)

**Important:** This package is primarily intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can change at any time without regard to semver.
npm package: @reach-ui-fork/popover
Description: Render a portal positioned relative to another element.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/popover

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/popover.svg)](https://npm.im/@reach-ui-fork/popover) ![MIT license](https://badgen.now.sh/badge/license/MIT)

```jsx
import * as React from "react";
import { Popover, positionDefault } from "@reach-ui-fork/popover";

function Example() {
	const ref = React.useRef(null);
	const [value, setValue] = React.useState("");
	return (
		<div>
			<label>
				<span>Type for a special message</span>
				<input
					type="text"
					ref={ref}
					onChange={(event) => setValue(event.target.value)}
				/>
			</label>

			{value.length > 0 && (
				<Popover targetRef={ref} position={positionDefault}>
					<div>
						<p>Whoa! Look at me!</p>
					</div>
				</Popover>
			)}
		</div>
	);
}
```
npm package: @reach-ui-fork/portal
Description: Declarative portals for React
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/portal

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/portal.svg)](https://npm.im/@reach-ui-fork/portal) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/portal) | [Source](https://github.com/reach/reach-ui/tree/main/packages/portal)

Creates and appends a DOM node to the end of `document.body` and renders a React tree into it. Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals).

```jsx
import { Portal } from "@reach-ui-fork/portal";

function Example() {
	return (
		<Portal>
			<div>Stuff goes here</div>
		</Portal>
	);
}
```
npm package: @reach-ui-fork/rect
Description: Measure React elements position in the DOM
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/rect

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/rect.svg)](https://npm.im/@reach-ui-fork/rect) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/rect) | [Source](https://github.com/reach/reach-ui/tree/main/packages/rect)

Measures DOM elements (aka. bounding client rect). See also [Element.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

```jsx
import { Rect, useRect } from "@reach-ui-fork/rect";

function Example() {
	const ref = React.useRef();
	const rect = useRect(ref);

	return (
		<div>
			<pre>{JSON.stringify(rect, null, 2)}</pre>
			<div
				ref={ref}
				contentEditable
				dangerouslySetInnerHTML={{
					__html: "Edit this to change the size!",
				}}
			/>
		</div>
	);
}
```
npm package: @reach-ui-fork/skip-nav
Description: Skip navigation links for screen reader and keyboard users.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/skip-nav

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/skip-nav.svg)](https://npm.im/@reach-ui-fork/skip-nav) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/skip-nav) | [Source](https://github.com/reach/reach-ui/tree/main/packages/skip-nav) | [WAI-ARIA](https://webaim.org/techniques/skipnav/)

Skip navigation link for screen reader and keyboard users. Because the main content is not usually the first thing in the document, it's valuable to provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

```jsx
import { SkipNavLink, SkipNavContent } from "@reach-ui-fork/skip-nav";
import "@reach-ui-fork/skip-nav/styles.css";

ReactDOM.return(
	<React.Fragment>
		{/* put the link at the top of your app */}
		<SkipNavLink />
		<div>
			<YourNav />
			{/* and the content next to your main content */}
			<SkipNavContent />
			<YourMainContent />
		</div>
	</React.Fragment>,
	rootNode
);
```
npm package: @reach-ui-fork/slider
Description: Accessible React Slider Component
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/slider

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/slider.svg)](https://npm.im/@reach-ui-fork/slider) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/slider) | [Source](https://github.com/reach/reach-ui/tree/main/packages/slider) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#slider)

A UI input component where the user selects a value from within a given range. A Slider has a handle that can be moved along a track to change its value. When the user's mouse or focus is on the Slider's handle, the value can be incremented with keyboard controls.

```jsx
import {
	Slider,
	SliderInput,
	SliderTrack,
	SliderRange,
	SliderHandle,
	SliderMarker,
} from "@reach-ui-fork/slider";
import "@reach-ui-fork/slider/styles.css";

function Example() {
	return <Slider min={0} max={200} step={10} />;
}

function ExampleComposed() {
	return (
		<SliderInput min={0} max={200} step={10}>
			<SliderTrack>
				<SliderRange />
				<SliderHandle />
			</SliderTrack>
		</SliderInput>
	);
}
```
npm package: @reach-ui-fork/tabs
Description: Accessible React Tabs Component
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/tabs

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/tabs.svg)](https://npm.im/@reach-ui-fork/tabs) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/tabs) | [Source](https://github.com/reach/reach-ui/tree/main/packages/tabs) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel)

An accessible tabs component.

The `Tab` and `TabPanel` elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

You can render any other elements you want inside of `Tabs`, but `TabList` should only render `Tab` elements, and `TabPanels` should only render `TabPanel` elements.

```jsx
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach-ui-fork/tabs";
import "@reach-ui-fork/tabs/styles.css";

function Example() {
	return (
		<Tabs>
			<TabList>
				<Tab>One</Tab>
				<Tab>Two</Tab>
				<Tab>Three</Tab>
			</TabList>

			<TabPanels>
				<TabPanel>
					<p>one!</p>
				</TabPanel>
				<TabPanel>
					<p>two!</p>
				</TabPanel>
				<TabPanel>
					<p>three!</p>
				</TabPanel>
			</TabPanels>
		</Tabs>
	);
}
```
npm package: @reach-ui-fork/tooltip
Description: Accessible tooltips
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/tooltip

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/tooltip.svg)](https://npm.im/@reach-ui-fork/tooltip) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/tooltip) | [Source](https://github.com/reach/reach-ui/tree/main/packages/tooltip) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip)

When the user's mouse or focus rests on an element, a non-interactive popup is displayed near it.

A couple notes on using tooltips:

- Do not use tooltips for information vital to task completion. The elements they are attached to should usually make sense on their own, but a tooltip can help provide a little bit more information--especially for new users of your app.
- Keep the content minimal, they are not intended to hide critical content.
- If you want interactive content, you can use a [Dialog](/dialog).

_Touch Events_: Touch events are currently not supported. There's not a lot of research or examples of these types of tooltips on mobile. We have some ideas but need to validate them first before implementing. Please adjust your interfaces on mobile to account for this.

```jsx
import { Tooltip, useTooltip, TooltipPopup } from "@reach-ui-fork/tooltip";
import { VisuallyHidden } from "@reach-ui-fork/visually-hidden";
import "@reach-ui-fork/tooltip/styles.css";

function Example() {
	return (
		<Tooltip label="Save">
			<button>
				<VisuallyHidden>Save</VisuallyHidden>
				<span aria-hidden>💾</span>
			</button>
		</Tooltip>
	);
}
```
npm package: @reach-ui-fork/utils
Description: Internal, shared utilities for Reach UI.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/utils

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/utils.svg)](https://npm.im/@reach-ui-fork/utils) ![MIT license](https://badgen.now.sh/badge/license/MIT)

Shared utilities for various `@reach-ui-fork` packages.

**Important:** This package is intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can and will change often without regard to semver. You have been warned!
npm package: @reach-ui-fork/visually-hidden
Description: Render text that is announced to screen readers but visually hidden.
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/visually-hidden

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/visually-hidden.svg)](https://npm.im/@reach-ui-fork/visually-hidden) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/visually-hidden) | [Source](https://github.com/reach/reach-ui/tree/main/packages/visually-hidden) | [Origin](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility) | [Further reading](https://a11yproject.com/posts/how-to-hide-content/)

Provides text for screen readers that is visually hidden. It is the logical opposite of the `aria-hidden` attribute.

In the following example, screen readers will announce "Save" and will ignore the icon; the browser displays the icon and ignores the text.

```jsx
import { VisuallyHidden } from "@reach-ui-fork/visually-hidden";

function Example() {
	return (
		<button>
			<VisuallyHidden>Save</VisuallyHidden>
			<span aria-hidden>💾</span>
		</button>
	);
}
```
npm package: @reach-ui-fork/window-size
Description: Measure the window size in React
Author: React Training
Latest version: 0.18.1

# @reach-ui-fork/window-size

[![Stable release](https://img.shields.io/npm/v/@reach-ui-fork/window-size.svg)](https://npm.im/@reach-ui-fork/window-size) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/window-size) | [Source](https://github.com/reach/reach-ui/tree/main/packages/window-size)

Measure the current window dimensions.

```jsx
import WindowSize, { useWindowSize } from "@reach-ui-fork/window-size";

function Example() {
	const { width, height } = useWindowSize();
	return (
		<div>
			<p>
				Looks like a pretty{" "}
				{width <= 400 ? "small" : width >= 1000 ? "large" : "normal"} screen!
			</p>
		</div>
	);
}
```
npm package: @reach/accordion
Description: Accessible React accordion component
Author: React Training
Latest version: 0.18.0

# @reach/accordion

[![Stable release](https://img.shields.io/npm/v/@reach/accordion.svg)](https://npm.im/@reach/accordion) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/accordion) | [Source](https://github.com/reach/reach-ui/tree/main/packages/accordion) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion)
npm package: @reach/alert
Description: Screen-reader-friendly alert messages.
Author: React Training
Latest version: 0.18.0

# @reach/alert

[![Stable release](https://img.shields.io/npm/v/@reach/alert.svg)](https://npm.im/@reach/alert) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/alert) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alert)

Screen-reader-friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.

The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screen reader on you won't notice a difference between rendering `<Alert>` vs. a `<div>`.

```jsx
function Example(props) {
	const [messages, setMessages] = React.useState([]);
	return (
		<div>
			<button
				onClick={() => {
					setMessages((prevMessages) =>
						prevMessages.concat([`Message #${prevMessages.length + 1}`])
					);
					setTimeout(() => {
						setMessages((prevMessages) => prevMessages.slice(1));
					}, 5000);
				}}
			>
				Add a message
			</button>
			<div>
				{messages.map((message, index) => (
					<Alert key={index}>{message}</Alert>
				))}
			</div>
		</div>
	);
}
```
npm package: @reach/alert-dialog
Description: Accessible React Alert Dialog.
Author: React Training
Latest version: 0.18.0

# @reach/alert-dialog

[![Stable release](https://img.shields.io/npm/v/@reach/alert-dialog.svg)](https://npm.im/@reach/alert-dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/alert-dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert-dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)

A modal dialog that interrupts the user's workflow to get a response, usually some sort of confirmation. This is different than a typical Dialog in that it requires some user response, like "Save", or "Cancel", etc.

Most of the time you'll use `AlertDialog`, `AlertDialogLabel`, and `AlertDialogDescription` together. If you need more control over the styling of the modal you can drop down a level and use `AlertDialogOverlay` and `AlertDialogContent` instead of `AlertDialog`.

When a Dialog opens, the _least destructive_ action should be focused so that if a user accidentally hits enter when the dialog opens no damage is done. This is accomplished with the `leastDestructiveRef` prop.

Every dialog must render an `AlertDialogLabel` so the screen reader knows what to say about the dialog. If an `AlertDialogDescription` is also rendered, the screen reader will also announce that. If you render more than these two elements and some buttons, the screen reader might not announce it so it's important to keep the content inside of `AlertDialogLabel` and `AlertDialogDescription`.

This is built on top of [@reach/dialog](https://reach.tech/dialog), so `AlertDialog` spreads its props and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and `AlertDialogContent` to `DialogContent`.

```jsx
function Example(props) {
	const [showDialog, setShowDialog] = React.useState(false);
	const cancelRef = React.useRef();
	const open = () => setShowDialog(true);
	const close = () => setShowDialog(false);

	return (
		<div>
			<button onClick={open}>Delete something</button>

			{showDialog && (
				<AlertDialog leastDestructiveRef={cancelRef}>
					<AlertDialogLabel>Please Confirm!</AlertDialogLabel>

					<AlertDialogDescription>
						Are you sure you want to delete something? This action is permanent,
						and we're totally not just flipping a field called "deleted" to
						"true" in our database, we're actually deleting something.
					</AlertDialogDescription>

					<div className="alert-buttons">
						<button onClick={close}>Yes, delete</button>{" "}
						<button ref={cancelRef} onClick={close}>
							Nevermind, don't delete.
						</button>
					</div>
				</AlertDialog>
			)}
		</div>
	);
}
```
npm package: @reach/auto-id
Description: Autogenerate IDs to facilitate WAI-ARIA and server rendering.
Author: React Training
Latest version: 0.18.0

# @reach/auto-id

[![Stable release](https://img.shields.io/npm/v/@reach/auto-id.svg)](https://npm.im/@reach/auto-id) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/auto-id) | [Source](https://github.com/reach/reach-ui/tree/main/packages/auto-id)

Autogenerate IDs to facilitate WAI-ARIA and server rendering.

A string can be supplied as an argument to be `useId` in lieu of the auto-generated ID. This is handy for accepting user-provided prop IDs that need to be deterministic.

```jsx
import { useId } from "@reach/auto-id";

function FormField(props) {
	const id = useId(props.id);
	return (
		<React.Fragment>
			<label htmlFor={id}>{props.label}</label>
			<input type={props.type} name={props.name} id={id} />
		</React.Fragment>
	);
}
```
npm package: @reach/checkbox
Description: Accessible components to build custom, tri-state checkboxes in React.
Author: React Training
Latest version: 0.18.0

# @reach/checkbox

[![Stable release](https://img.shields.io/npm/v/@reach/checkbox.svg)](https://npm.im/@reach/checkbox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/checkbox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/checkbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox)

React components to build accessible custom checkboxes with support for indeterminate (mixed) state.
npm package: @reach/combobox
Description: Accessible React Combobox (Autocomplete).
Author: React Training
Latest version: 0.18.0

# @reach/combobox

[![Stable release](https://img.shields.io/npm/v/@reach/combobox.svg)](https://npm.im/@reach/combobox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/combobox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/combobox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)

Accessible combobox (autocomplete or autosuggest) component for React.

A combobox is the combination of an `<input type="text" />` and a list. The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a `<select />`, but more of an `<input type="text" />` with some suggestions. You can, however, validate that the value comes from the list, that's up to your app.

```js
import {
	Combobox,
	ComboboxInput,
	ComboboxPopover,
	ComboboxList,
	ComboboxOption,
	ComboboxOptionText,
} from "@reach/combobox";
import "@reach/combobox/styles.css";

function Example() {
	return (
		<div>
			<Combobox>
				<ComboboxInput aria-labelledby="demo" />
				<ComboboxPopover>
					<ComboboxList aria-labelledby="demo">
						<ComboboxOption value="Apple" />
						<ComboboxOption value="Banana" />
						<ComboboxOption value="Orange" />
						<ComboboxOption value="Pineapple" />
						<ComboboxOption value="Kiwi" />
					</ComboboxList>
				</ComboboxPopover>
			</Combobox>
		</div>
	);
}
```
npm package: @reach/component-component
Description: Declarative React Component Definitions
Author: React Training
Latest version: 0.17.0

# @reach/component-component

[![Stable release](https://img.shields.io/npm/v/@reach/component-component.svg)](https://npm.im/@reach/component-component) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/component-component) | [Source](https://github.com/reach/reach-ui/tree/main/packages/component-component)

> NOTE: This component was developed in the days before React Hooks.
> In most cases, you should probably build your function components using hooks and use a class
> component in the rare cases you need them. We may deprecate this component in the future.

A dynamic, functional version of `React.Component`, a component component if you will. Useful for inline lifecycles and state.

```jsx
<Component initialState={{ hue: 0 }}>
  {({ setState, state }) => (
    <div style={{ textAlign: "center" }}>
      <button onClick={() => setState({ hue: Math.random() * 360 })}>
        Generate Triad Colorscheme
      </button>
      <br />
      {[1, 2, 3].map((n) => (
        <div
          key={n}
          style={{
            display: "inline-block",
            margin: 10,
            width: "2em",
            height: "2em",
            borderRadius: "50%",
            background: `hsl(${state.hue + n * 120}, 50%, 50%)`,
            transition: "background-color 200ms ease",
          }}
        />
      ))}
    </div>
  )}
</Component>
```
npm package: @reach/dialog
Description: Accessible React Modal Dialog.
Author: React Training
Latest version: 0.18.0

# @reach/dialog

[![Stable release](https://img.shields.io/npm/v/@reach/dialog.svg)](https://npm.im/@reach/dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal)

An accessible dialog or modal window.

```jsx
import { Dialog } from "@reach/dialog";
import "@reach/dialog/styles.css";

function Example(props) {
	const [showDialog, setShowDialog] = React.useState(false);
	const open = () => setShowDialog(true);
	const close = () => setShowDialog(false);

	return (
		<div>
			<button onClick={open}>Open Dialog</button>
			<Dialog isOpen={showDialog} onDismiss={close}>
				<button className="close-button" onClick={close}>
					<VisuallyHidden>Close</VisuallyHidden>
					<span aria-hidden>×</span>
				</button>
				<p>Hello there. I am a dialog</p>
			</Dialog>
		</div>
	);
}
```
npm package: @reach/disclosure
Description: Accessible React disclosure component
Author: React Training
Latest version: 0.18.0

# @reach/disclosure

[![Stable release](https://img.shields.io/npm/v/@reach/disclosure.svg)](https://npm.im/@reach/disclosure) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/disclosure) | [Source](https://github.com/reach/reach-ui/tree/main/packages/disclosure) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#disclosure)
npm package: @reach/dropdown
Description: React dropdown menu.
Author: React Training
Latest version: 0.18.0

# @reach/dropdown

[![Stable release](https://img.shields.io/npm/v/@reach/dropdown.svg)](https://npm.im/@reach/dropdown) ![MIT license](https://badgen.now.sh/badge/license/MIT)

A React dropdown menu.

**Important:** This package is primarily intended for internal use by the Reach UI library. You should probably not use it directly in your production projects, as the APIs can still change with minor version bumps. You have been warned!
npm package: @reach/listbox
Description: Accessible React listbox input.
Author: React Training
Latest version: 0.18.0

# @reach/listbox

[![Stable release](https://img.shields.io/npm/v/@reach/listbox.svg)](https://npm.im/@reach/listbox) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/listbox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox)

An accessible listbox for custom select inputs.

```jsx
import * as React from "react";
import { Listbox, ListboxOption } from "@reach/listbox";
import "@reach/listbox/styles.css";

function Example(props) {
	let [value, setValue] = React.useState("default");
	return (
		<Listbox value={value} onChange={(value) => setValue(value)}>
			<ListboxOption value="default">🌮 Choose a taco</ListboxOption>
			<hr />
			<ListboxOption value="asada" valueText="Carne Asada">
				🌮 Carne Asada
			</ListboxOption>
			<ListboxOption value="pollo" valueText="Pollo">
				🌮 Pollo
			</ListboxOption>
			<ListboxOption value="pastor" valueText="Pastor">
				🌮 Pastor
			</ListboxOption>
			<ListboxOption value="lengua" valueText="Lengua">
				🌮 Lengua
			</ListboxOption>
		</Listbox>
	);
}
```
npm package: @reach/machine
Description: State machine utilities for the Reach UI library.
Author: React Training
Latest version: 0.18.0

# @reach/machine

[![Stable release](https://img.shields.io/npm/v/@reach/machine.svg)](https://npm.im/@reach/machine) ![MIT license](https://badgen.now.sh/badge/license/MIT)

State machine utilities for the Reach UI library.

**Important:** This package is intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can and will change often without regard to semver. You have been warned!
npm package: @reach/menu-button
Description: Accessible React button dropdown menu.
Author: React Training
Latest version: 0.18.0

# @reach/menu-button

[![Stable release](https://img.shields.io/npm/v/@reach/menu-button.svg)](https://npm.im/@reach/menu-button) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/menu-button) | [Source](https://github.com/reach/reach-ui/tree/main/packages/menu-button) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton)

An accessible dropdown menu for the common dropdown menu button design pattern.

```jsx
import {
	Menu,
	MenuList,
	MenuButton,
	MenuItem,
	MenuLink,
} from "@reach/menu-button";
import "@reach/menu-button/styles.css";

function Example() {
	return (
		<Menu>
			<MenuButton>
				Actions <span aria-hidden>▾</span>
			</MenuButton>
			<MenuList>
				<MenuItem onSelect={() => alert("Download")}>Download</MenuItem>
				<MenuItem onSelect={() => alert("Copy")}>Create a Copy</MenuItem>
				<MenuItem onSelect={() => alert("Mark as Draft")}>
					Mark as Draft
				</MenuItem>
				<MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
				<MenuLink as="a" href="https://reacttraining.com/workshops/">
					Attend a Workshop
				</MenuLink>
			</MenuList>
		</Menu>
	);
}
```
npm package: @reach/observe-rect
Description: Observe the Rect of a DOM element.
Author: React Training
Latest version: 1.2.0

<p align="center">
  <a href="https://reach.tech">
    <img alt="Reach observeRect" src="./logo.png" width="400">
  </a>
</p>

<p align="center">
  Observe the rect of a DOM element.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@reach/observe-rect"><img src="https://img.shields.io/npm/v/@reach/observe-rect.svg?style=flat-square"></a>
  <a href="https://www.npmjs.com/package/@reach/observe-rect"><img src="https://img.shields.io/npm/dm/@reach/observe-rect.svg?style=flat-square"></a>
</p>

<p align="center">
  <img src="./demo.gif" alt="Demo"/>
</p>

## Installation

```
npm install @reach/observe-rect
# or
yarn add @reach/observe-rect
```

## Usage

```js
import observeRect from "@reach/observe-rect";

let node = document.getElementById("some-node");

let rectObserver = observeRect(node, rect => {
  console.log("left", rect.left);
  console.log("top", rect.top);
  console.log("height", rect.height);
  console.log("width", rect.width);
});

// start observing
rectObserver.observe();

// stop observing
rectObserver.unobserve();
```

## About

A lot of things can change the position or size of an element, like scrolling, content reflows and user input. This utility observes and notifies you when your element's rect changes.

## Legal

MIT License
Copyright (c) 2018-present, Ryan Florence
npm package: @reach/polymorphic
Description: Internal utility types for polymorphism in Reach UI.
Author: React Training
Latest version: 0.18.0

# @reach/polymorphic

[![Stable release](https://img.shields.io/npm/v/@reach/polymorphic.svg)](https://npm.im/@reach/polymorphic) ![MIT license](https://badgen.now.sh/badge/license/MIT)

**Important:** This package is primarily intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can change at any time without regard to semver.
npm package: @reach/popover
Description: Render a portal positioned relative to another element.
Author: React Training
Latest version: 0.18.0

# @reach/popover

[![Stable release](https://img.shields.io/npm/v/@reach/popover.svg)](https://npm.im/@reach/popover) ![MIT license](https://badgen.now.sh/badge/license/MIT)

```jsx
import * as React from "react";
import { Popover, positionDefault } from "@reach/popover";

function Example() {
	const ref = React.useRef(null);
	const [value, setValue] = React.useState("");
	return (
		<div>
			<label>
				<span>Type for a special message</span>
				<input
					type="text"
					ref={ref}
					onChange={(event) => setValue(event.target.value)}
				/>
			</label>

			{value.length > 0 && (
				<Popover targetRef={ref} position={positionDefault}>
					<div>
						<p>Whoa! Look at me!</p>
					</div>
				</Popover>
			)}
		</div>
	);
}
```
npm package: @reach/portal
Description: Declarative portals for React
Author: React Training
Latest version: 0.18.0

# @reach/portal

[![Stable release](https://img.shields.io/npm/v/@reach/portal.svg)](https://npm.im/@reach/portal) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/portal) | [Source](https://github.com/reach/reach-ui/tree/main/packages/portal)

Creates and appends a DOM node to the end of `document.body` and renders a React tree into it. Useful for rendering a natural React element hierarchy with a different DOM hierarchy to prevent parent styles from clipping or hiding content (for popovers, dropdowns, and modals).

```jsx
import { Portal } from "@reach/portal";

function Example() {
	return (
		<Portal>
			<div>Stuff goes here</div>
		</Portal>
	);
}
```
npm package: @reach/rect
Description: Measure React elements position in the DOM
Author: React Training
Latest version: 0.18.0

# @reach/rect

[![Stable release](https://img.shields.io/npm/v/@reach/rect.svg)](https://npm.im/@reach/rect) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/rect) | [Source](https://github.com/reach/reach-ui/tree/main/packages/rect)

Measures DOM elements (aka. bounding client rect). See also [Element.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

```jsx
import { Rect, useRect } from "@reach/rect";

function Example() {
	const ref = React.useRef();
	const rect = useRect(ref);

	return (
		<div>
			<pre>{JSON.stringify(rect, null, 2)}</pre>
			<div
				ref={ref}
				contentEditable
				dangerouslySetInnerHTML={{
					__html: "Edit this to change the size!",
				}}
			/>
		</div>
	);
}
```
npm package: @reach/router
Description: Next generation Routing for React.
Author: Ryan Florence
Latest version: 1.3.4

<p align="center">
  <a href="https://reach.tech/router/">
    <img alt="Reach Router" src="./logo-horizontal.png" width="400">
  </a>
</p>

<p align="center">
  Next Generation Routing for <a href="https://facebook.github.io/react">React</a>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@reach/router"><img src="https://img.shields.io/npm/v/@reach/router.svg?style=flat-square"></a>
  <a href="https://www.npmjs.com/package/@reach/router"><img src="https://img.shields.io/npm/dm/@reach/router.svg?style=flat-square"></a>
  <a href="https://travis-ci.org/reach/router"><img src="https://img.shields.io/travis/reach/router/master.svg?style=flat-square"></a>
</p>

## Documentation

[Documentation Site](https://reach.tech/router)

You can also find the docs in the [website directory](./website/src/markdown).

## Community

[Join us on Spectrum](https://spectrum.chat/reach)

## Legal

MIT License
Copyright (c) 2018-present, Ryan Florence
npm package: @reach/skip-nav
Description: Skip navigation links for screen reader and keyboard users.
Author: React Training
Latest version: 0.18.0

# @reach/skip-nav

[![Stable release](https://img.shields.io/npm/v/@reach/skip-nav.svg)](https://npm.im/@reach/skip-nav) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/skip-nav) | [Source](https://github.com/reach/reach-ui/tree/main/packages/skip-nav) | [WAI-ARIA](https://webaim.org/techniques/skipnav/)

Skip navigation link for screen reader and keyboard users. Because the main content is not usually the first thing in the document, it's valuable to provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

```jsx
import { SkipNavLink, SkipNavContent } from "@reach/skip-nav";
import "@reach/skip-nav/styles.css";

ReactDOM.return(
	<React.Fragment>
		{/* put the link at the top of your app */}
		<SkipNavLink />
		<div>
			<YourNav />
			{/* and the content next to your main content */}
			<SkipNavContent />
			<YourMainContent />
		</div>
	</React.Fragment>,
	rootNode
);
```