@reach/auto-id

Autogenerate IDs to facilitate WAI-ARIA and server rendering.

Usage no npm install needed!

<script type="module">
  import reachAutoId from 'https://cdn.skypack.dev/@reach/auto-id';
</script>

README

@reach/auto-id

Docs | Source

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.

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>
  );
}