@accessible/use-id 中文文档教程
useId()
npm i @accessible/use-id
创建唯一的确定性 ID 以促进 WAI-ARIA 和服务器渲染。 从 @reach/auto-id 分叉。
Quick Start
```jsx和谐 import useId from '@accessible/use-id'
常量组件 = () => { const id = useId() 返回
API
useId(fallbackId?: string | null | 0 | false, prefix?: string): string | undefined
一个钩子,每个组件返回一个唯一但确定的 ID
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
这个库是 @ 的一个分支reach/auto-id
Why fork?
Reach UI 不使用真正的语义版本控制(他们的每个包同时更新版本,不管 对单个包的更改……废话)所以你可能(而且很烦人)很容易得到重复的 包中 auto-id
包的版本。 最后,Reach 库会抛出超级烦人的警告 在 SSR 中,因为它使用 useLayoutEffect
。 这个库使用 @react-hook/passive-layout-effect 避免这种情况。
LICENSE
麻省理工学院
useId()
npm i @accessible/use-id
Creates unique deterministic IDs to facilitate WAI-ARIA and server rendering. Forked from @reach/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
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
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。