Unique id

A CSS-safe, document-unique id.

Reach for it for the targets of aria-controls and aria-labelledby. The helpers are pure: no DOM at import time or in the call path, so they run on the server and in tests. Each result below is computed when the page is built, by running the call shown.

Import

import { uniqueId, isCssSafeId } from '@ecopages/radiant-ui/helpers';

Ids

uniqueId(prefix) returns ${prefix}-${uuid} with the dashes of the UUID removed. A prefix that is not CSS-safe (it must start with a letter) is prefixed with rui-, or replaced by rui. It needs a global crypto.

CallResult
uniqueId('menu').replace(/[0-9a-f]{32}$/, '<32 hex digits>')"menu-<32 hex digits>"
uniqueId('1').replace(/[0-9a-f]{32}$/, '<32 hex digits>')"rui-1-<32 hex digits>"
isCssSafeId('menu-1')true
isCssSafeId('1menu')false