useId

Generate a random ID for memory

Import: import { useId } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useId generates a random ID that persists during rendering. Hooks are typically used to bind input elements to tags. The generated random id is saved into the ref and will not change unless the component is unloaded.

import { useId } from '@kubed/hooks';
import { Input } from '@kubed/components'

function MyInput({ id }) {
   const uuid = useId(id);

   return (
     <>
       <label htmlFor={uuid}>Input label</label>
       <Input type="text" id={uuid} />
     </>
   );
}

export default function App() {
   return (
     <div className="flex gap-3 items-center">
       // input and label will have id 'my-id'
       <MyInput id="my-id" />
       // input and label will have random id 'kubed-fZMoF'
       <MyInput />
     </div>
   );
}

1
import { useId } from '@kubed/hooks';
2
import { Input } from '@kubed/components'
3

4
function MyInput({ id }) {
5
   const uuid = useId(id);
6

7
   return (
8
     <>
9
       <label htmlFor={uuid}>Input label</label>
10
       <Input type="text" id={uuid} />
11
     </>
12
   );
13
}
14

15
export default function App() {
16
   return (
17
     <div className="flex gap-3 items-center">
18
       // input and label will have id 'my-id'
19
       <MyInput id="my-id" />
20
       // input and label will have random id 'kubed-fZMoF'
21
       <MyInput />
22
     </div>
23
   );
24
}
25

26

API

The useId hook accepts two parameters:

id – the string value returned by default
generateId – function for generating random IDs

Hook returns a string value, which can be either "id" (if the first argument is passed) or a random id generated using the "generateId" function.

1
function useId(id: string, generateId?: () => string): string;

Params

Parameters	Default Value	Type	Description
id	-	`string`	The string value returned by default
generateId	-	`() => string`	Function to generate a random ID`

Result

Parameters	Default Value	Type	Description
id	-	`string`	Generate a random ID for memory