Id
This is experimental and may introduce breaking changes or be removed altogether in patch and minor versions without notice. Learn more in Experimental features.
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
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
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
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
Idis used by CompositeGroup, CompositeItem and TabPanel.
Learn more in Composition.
#Props
#useIdState
-
baseIdstringID that will serve as a base for all the items IDs.
#Id
-
idstring | undefinedSame 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.
-
baseIdstringID that will serve as a base for all the items IDs.