https://github.com/Yaska/react-use-id-hook

Hook to create SSR-safe consistent unique id strings
https://github.com/Yaska/react-use-id-hook

Last synced: about 1 month ago
JSON representation

Hook to create SSR-safe consistent unique id strings

• Host: GitHub
• URL: https://github.com/Yaska/react-use-id-hook
• Owner: Yaska
• License: mit
• Created: 2019-07-23T09:52:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:21:56.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T04:42:27.615Z (8 months ago)
• Language: TypeScript
• Size: 2.41 MB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-id-hook` - safe unique id strings. (Packages)
• awesome-react-hooks-cn - `react-use-id-hook` - safe unique id strings. (Packages)
• awesome-react-hooks - `react-use-id-hook` - safe unique id strings. (Packages)
• awesome-react-hooks - `react-use-id-hook` - safe unique id strings. (Packages)

README

        
# react-use-id-hook

This is a tiny hook to create consisent id strings while rendering React, both when doing SSR and normally.

This is useful for creating unique `id` attributes for DOM elements.

## API

### ``

This provider provides the id state. Your app needs to be wrapped with it.

### `useId()`

This hook returns a unique id that remains consistent on re-render

### `useGetId()`

This hook returns a function that returns unique ids. To use it, the same rule applies as for hooks:

> always call it in the same order, without control flow

## Installation

1. Install the `react-use-id-hook` NPM package with your favorite package manager.

2. Wrap your top-level component with ``

3. In your components, use `useId()` or `useGetId()` as appropriate.

## Example

[See the full example](https://github.com/Yaska/react-use-id-hook/blob/master/example/index.tsx).

```js

const CheckBox = ({value, onChange}) => {

	const id = useId()

	return (

		<>

			 onChange(ev.target.checked)}

			/>

			Click me

		>

	)

}

```