@accessible/use-id
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

useId()

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @accessible/use-id

Creates unique deterministic IDs to facilitate WAI-ARIA and server rendering. Forked from @reach/auto-id.

Quick Start

import useId from '@accessible/use-id'

const Component = () => {
  const id = useId()
  return <div id={id} />
  // <div id='A:1'>
}

API

useId(fallbackId?: string | null | 0 | false, prefix?: string): string | undefined

A hook that returns a unique, but deterministic ID once per component

Arguments

Argument Type Default Required? Description
fallbackId string | null | 0 | false undefined No Allows you to provide your own id as a fallback
prefix string 🅰 No Allows you to provide a prefix for the id to prevent collisions with other auto id libs

Credit

This library is a fork of @reach/auto-id

Why fork?

Reach UI doesn't use real semantic versioning (each of their packages updates versions at the same time regardless of changes to individual packages... nonsense) so it's possible (and annoyingly so) that you could easily wind up with duplicate version of the auto-id package in your bundle. Lastly, the Reach library throws super annoying warnings in SSR because it uses useLayoutEffect. This library uses @react-hook/passive-layout-effect to avoid that.

LICENSE

MIT

Package Sidebar

Install

npm i @accessible/use-id

Weekly Downloads

8,855

Version

1.1.2

License

MIT

Unpacked Size

21.3 kB

Total Files

17

Last publish

Collaborators

  • jaredlunde