react-use-id-hook

This is a tiny hook to create consisent id strings while rendering React, both when doing SSR and normally.

This is useful for creating unique id attributes for DOM elements.

API

<IdProvider [prefix="id-"] />

This provider provides the id state. Your app needs to be wrapped with it.

useId()

This hook returns a unique id that remains consistent on re-render

useGetId()

This hook returns a function that returns unique ids. To use it, the same rule applies as for hooks:

always call it in the same order, without control flow

Example

Also see the example/ folder.

const CheckBox = ({value, onChange}) => {
	const id = useId()

	return (
		<>
			<input
				id={id}
				type="checkbox"
				checked={value}
				onChange={ev => onChange(ev.target.checked)}
			/>
			<label htmlFor={id}>Click me</label>
		</>
	)
}