Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub

Id

This is experimental and may have breaking changes in minor or patch version updates. Issues for this module will have lower priority. Even so, if you use it, feel free to give us feedback.

Id is a component that renders an element with an automatically generated id attribute that is consistent across server and client. It's used by several other components.

#Installation

npm install reakit

Learn more in Get started.

#Usage

id-1
id-2
import {
  unstable_IdProvider as IdProvider,
  unstable_Id as Id,
} from "reakit/Id";

function Example() {
  return (
    <IdProvider>
      <Id>{(props) => <div {...props}>{props.id}</div>}</Id>
      <Id>{(props) => <div {...props}>{props.id}</div>}</Id>
    </IdProvider>
  );
}

#useIdState

a-1
a-2
different-id
a-4
import {
  unstable_useIdState as useIdState,
  unstable_Id as Id,
} from "reakit/Id";

function Example() {
  const id = useIdState({ baseId: "a" });
  return (
    <>
      <Id {...id}>{(props) => <div {...props}>{props.id}</div>}</Id>
      <Id {...id}>{(props) => <div {...props}>{props.id}</div>}</Id>
      <Id {...id} id="different-id">
        {(props) => <div {...props}>{props.id}</div>}
      </Id>
      <Id {...id}>{(props) => <div {...props}>{props.id}</div>}</Id>
    </>
  );
}

#useId

a-1
a-2
different-id
a-4
import {
  unstable_IdProvider as IdProvider,
  unstable_useId as useId,
} from "reakit/Id";

function Item(props) {
  const { id } = useId(props);
  return (
    <div {...props} id={id}>
      {id}
    </div>
  );
}

function Example() {
  return (
    <IdProvider prefix="a">
      <Item />
      <Item />
      <Item id="different-id" />
      <Item />
    </IdProvider>
  );
}

#Accessibility

Id renders unique and consistent id attributes so they can be used in several aria- props.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#useIdState

  • baseId string

    ID that will serve as a base for all the items IDs.

#Id

  • id string | undefined

    Same as the HTML attribute.

1 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

  • baseId string

    ID that will serve as a base for all the items IDs.