UNPKG

784 BMarkdownView Raw
1# @reach/auto-id
2
3[![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)
4
5[Docs](https://reach.tech/auto-id) | [Source](https://github.com/reach/reach-ui/tree/main/packages/auto-id)
6
7Autogenerate IDs to facilitate WAI-ARIA and server rendering.
8
9A 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.
10
11```jsx
12import { useId } from "@reach/auto-id";
13
14function FormField(props) {
15 const id = useId(props.id);
16 return (
17 <React.Fragment>
18 <label htmlFor={id}>{props.label}</label>
19 <input type={props.type} name={props.name} id={id} />
20 </React.Fragment>
21 );
22}
23```