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.
| Call | Result |
|---|---|
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 |