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 |
|
7 | Autogenerate IDs to facilitate WAI-ARIA and server rendering.
|
8 |
|
9 | 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.
|
10 |
|
11 | ```jsx
|
12 | import { useId } from "@reach/auto-id";
|
13 |
|
14 | function 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 | ```
|