use-id

Generate memoized random id
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

use-id hook generates random id that persists across renders. Hook is usually used to bind input elements to labels. Generated random id is saved to ref and will not change unless component is unmounted. Hook will use React useId under the hood if it is available (react@>=18.0 is required).

import { useId } from '@mantine/hooks';


function Input({ id }: { id?: string }) {
  const uuid = useId(id);


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


// input and label will have id 'my-id'
const withId = <Input id="my-id" />;


// input and label will have random id 'mantine-fZMoF'
const withoutId = <Input />;

Definition

function useId(id: string): string;
Go back
use-disclosure – @mantine/hooks
Up next
use-idle – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter