https://github.com/accessible-ui/use-id
🅰 A React hook for creating unique IDs to facilitate WAI-ARIA and server rendering
https://github.com/accessible-ui/use-id
Last synced: 4 months ago
JSON representation
🅰 A React hook for creating unique IDs to facilitate WAI-ARIA and server rendering
- Host: GitHub
- URL: https://github.com/accessible-ui/use-id
- Owner: accessible-ui
- License: mit
- Created: 2019-12-25T03:09:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:22:36.000Z (over 2 years ago)
- Last Synced: 2025-01-10T17:55:45.473Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.52 MB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
useId()
npm i @accessible/use-id
Creates unique deterministic IDs to facilitate WAI-ARIA and server rendering. Forked from [@reach/auto-id](https://github.com/reach/reach-ui/tree/master/packages/auto-id).
## Quick Start
```jsx harmony
import useId from '@accessible/use-id'
const Component = () => {
const id = useId()
return
//
}
```
## 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](https://github.com/reach/reach-ui/tree/master/packages/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](https://github.com/jaredLunde/react-hook/tree/master/packages/passive-layout-effect#readme)
to avoid that.
## LICENSE
MIT