Skip to content

Commit d9bd8cb

Browse files
authored
Update README.md
1 parent 2e3ea6e commit d9bd8cb

File tree

1 file changed

+22
-12
lines changed

1 file changed

+22
-12
lines changed

README.md

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ UID
77
[![bundle size](https://badgen.net/bundlephobia/minzip/react-uid)](https://bundlephobia.com/result?p=react-uid)
88
[![downloads](https://badgen.net/npm/dm/react-uid)](https://www.npmtrends.com/react-uid)
99

10-
11-
Generate UID for an item, Renderless UID containers, SSR-friendly UID generation __in 900 bytes__.
10+
To generate UID/Key for an `item`, consistently between client and server, __in 900 bytes__.
1211

1312
Example - https://codesandbox.io/s/kkmwr6vv47
1413

1514
## API
1615
React UID provides 3 different APIs
17-
- vanilla js API
18-
- React Component, renderProp based API
19-
- React Hooks
16+
- vanilla js API - `uid(item) -> key`
17+
- React Component, via renderProp based API - `<UID>{ id => <><label htmlFor={id}/><input id={id}/></>}</UID>
18+
- React Hooks - `useUID`
19+
2020
#### Javascript
21-
- `uid(item, [index])` - generates UID for an object(function and so on). Quite usable for React `key` property.
21+
- `uid(item, [index])` - generates UID for an object(array, function and so on), result could be used as React `key`.
2222
`item` should be an object, but could be anything. In case it is not an "object", and might have non-unique value - you have to specify second argument - `index`
2323
```js
2424
import {uid} from 'react-uid';
@@ -35,6 +35,9 @@ React UID provides 3 different APIs
3535
const data = ["a", "a"];
3636
data.map( (item, index) => <li key={uid(item, index)}>{item}</li>)
3737
```
38+
39+
JS API might be NOT __SSR friendly__,
40+
3841
#### React Components
3942
- `UID` - renderless container for generation Ids
4043
```js
@@ -61,21 +64,25 @@ React UID provides 3 different APIs
6164

6265
// UID also provide `uid` as a second argument
6366
<UID>
64-
{(id,uid) => (
67+
{(_, uid) => (
6568
data.map( item => <li key={uid(item)}>{item}</li>)
6669
)}
6770
</UID>
6871

6972
// in the case `item` is not an object, but number or string - provide and index
7073
<UID>
71-
{(id,uid) => (
74+
{(_, uid) => (
7275
data.map( (item, index) => <li key={uid(item, index)}>{item}</li>)
7376
)}
7477
</UID>
7578
```
79+
The difference between `uid` and `UID` versions are in "nesting" - any `UID` used inside another `UID` would contain "parent prefix" in the result, scoping `uid` to the local tree branch.
80+
81+
UID might be NOT __SSR friendly__,
82+
7683
#### Hooks (16.7+)
77-
- `useUID` will generate just a UID
78-
- `useUIDSeed` will generate a seed generator, you can use for multiple fields
84+
- `useUID()` will generate just a UID
85+
- `useUIDSeed()` will generate a seed generator, you can use for multiple fields
7986
```js
8087
const Form = () => {
8188
const uid = useUID();
@@ -98,7 +105,7 @@ const Form = () => {
98105
)
99106
}
100107
```
101-
Hooks API __is SSR friendly__.
108+
Hooks API __is SSR friendly__,
102109
103110
### Server-side friendly UID
104111
@@ -125,7 +132,7 @@ Next example will generate the same code, regardless how many time you will rend
125132
</UIDReset>
126133
```
127134
128-
__UID__ is not SSR friendly - use __UIDConsumer__.
135+
__UID__ is not 100% SSR friendly - use __UIDConsumer__.
129136
130137
### Code splitting
131138
Codesplitting may affect the order or existence of the components, so alter
@@ -157,6 +164,9 @@ import {UIDReset, UIDFork, UIDConsumer} from 'react-uid';
157164
158165
The hooks API only needs the `<UIDFork>` wrapper.
159166
167+
### So hard?
168+
"Basic API" is not using Context API to keep realization simple, and React tree more flat.
169+
160170
# Types
161171
Written in TypeScript
162172

0 commit comments

Comments
 (0)