You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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__.
12
11
13
12
Example - https://codesandbox.io/s/kkmwr6vv47
14
13
15
14
## API
16
15
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 => <><labelhtmlFor={id}/><inputid={id}/></>}</UID>
18
+
- React Hooks - `useUID`
19
+
20
20
#### 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`.
22
22
`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`
23
23
```js
24
24
import {uid} from'react-uid';
@@ -35,6 +35,9 @@ React UID provides 3 different APIs
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
+
76
83
#### 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
79
86
```js
80
87
constForm= () => {
81
88
constuid=useUID();
@@ -98,7 +105,7 @@ const Form = () => {
98
105
)
99
106
}
100
107
```
101
-
Hooks API __is SSR friendly__.
108
+
Hooks API __is SSR friendly__,
102
109
103
110
### Server-side friendly UID
104
111
@@ -125,7 +132,7 @@ Next example will generate the same code, regardless how many time you will rend
125
132
</UIDReset>
126
133
```
127
134
128
-
__UID__ is not SSR friendly - use __UIDConsumer__.
135
+
__UID__ is not 100% SSR friendly - use __UIDConsumer__.
129
136
130
137
### Code splitting
131
138
Codesplitting may affect the order or existence of the components, so alter
@@ -157,6 +164,9 @@ import {UIDReset, UIDFork, UIDConsumer} from 'react-uid';
157
164
158
165
The hooks API only needs the `<UIDFork>` wrapper.
159
166
167
+
### So hard?
168
+
"Basic API" is not using Context API to keep realization simple, and React tree more flat.
0 commit comments