HTML ID generator
Use
htmlIdGenerator()() to generate unique IDs for elements with an optional prefix and/or suffix. The first call to htmlIdGenerator accepts the prefix as an optional argument and returns a second function which accepts an optional suffix and returns the generated ID.ID generator with prefix
Provide a prefix to the generator to get an ID that starts with the specified prefix.
ID generator with suffix
Provide a suffix to the generator to get an ID that starts with the specified suffix.
ID generator with both prefix and suffix
The htmlIdGenerator is capable of generating an ID with both a specified prefix and suffix.
Reusing the generator for multiple IDs
As you may have noticed, htmlIdGenerator is a curried function. This means you can reuse the original htmlIdGenerator() call to generate multiple IDs. Additionally, if you pass in suffixes to your second call, the generated ID(s) will share the same unique ID.
Memoized hook for component use
useGeneratedHtmlId is a custom React hook that automatically memoizes a randomly generated ID, preventing the ID from regenerating on every component rerender. The ID will only change if the component fully unmounts/mounts, or if you dynamically pass in new hook arguments.
Please note that unlike htmlIdGenerator, useGeneratedHtmlId is a single function and does not support generating multiple IDs that share the same unique ID. It is instead best used for simple one-off IDs, rather than groups of them.
Props
useGeneratedHtmlId
Prop | Description and type | Default value |
|---|---|---|
Prop prefix# | Description and type Optional prefix to prepend to the generated ID string | Default value |
Prop suffix# | Description and type Optional suffix to append to the generated ID string | Default value |
Prop conditionalId# | Description and type Optional conditional ID to use instead of a randomly generated ID. string | Default value |