useElementId

Provides unique ids for the page accessibility attributes


Usage

When building interfaces, you'll see a lot of cases when you need to link elements together with an id, especially for implementing accessibility-related features. Those ids are global, and there is always a risk of getting a conflict in a large application. Reshaped exposes the useElementId hook to avoid id conflicts, which is suited specifically for the DOM elements and supports server-side rendering.

Since hooks can't be used conditionally, useElementId supports working with random and manually defined ids. If your component has an optional id property, you can pass it along to useElementId, and it will either use the passed id if it's defined or generate a random one.

Note: useElementId generates simple ids using an internal counter. Don't use it for any business logic where you need to generate a truly unique id that stays the same across multiple page renders.

Arguments and return value

Previous