extra-react-hooks 0.8.7 → 0.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/use-number-input.d.ts +1 -1
- package/lib/use-number-input.js +1 -0
- package/lib/use-number-input.js.map +1 -1
- package/lib/use-update-layout-effect.d.ts +2 -0
- package/lib/use-update-layout-effect.js +11 -0
- package/lib/use-update-layout-effect.js.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/use-number-input.ts +4 -2
- package/src/use-update-layout-effect.ts +16 -0
package/README.md
CHANGED
|
@@ -83,6 +83,14 @@ function useUpdateEffect(
|
|
|
83
83
|
): void
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
### useUpdateLayoutEffect
|
|
87
|
+
```ts
|
|
88
|
+
function useUpdateLayoutEffect(
|
|
89
|
+
effect: EffectCallback
|
|
90
|
+
, deps?: React.DependencyList
|
|
91
|
+
): void
|
|
92
|
+
```
|
|
93
|
+
|
|
86
94
|
### useStateCycle
|
|
87
95
|
```ts
|
|
88
96
|
function useStateCycle<T>(
|
|
@@ -229,7 +237,8 @@ function useNumberInput(params: {
|
|
|
229
237
|
}): {
|
|
230
238
|
getInputProps(): Required<Pick<
|
|
231
239
|
React.ComponentPropsWithoutRef<'input'>
|
|
232
|
-
, '
|
|
240
|
+
, 'type'
|
|
241
|
+
| 'value'
|
|
233
242
|
| 'onChange'
|
|
234
243
|
| 'onBlur'
|
|
235
244
|
>>
|
package/lib/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from './use-unmount.js';
|
|
|
8
8
|
export * from './use-effect-async.js';
|
|
9
9
|
export * from './use-abortable-callback.js';
|
|
10
10
|
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-update-layout-effect.js';
|
|
11
12
|
export * from './use-single-selection.js';
|
|
12
13
|
export * from './use-multiple-selection.js';
|
|
13
14
|
export * from './use-state-cycle.js';
|
package/lib/index.js
CHANGED
|
@@ -8,6 +8,7 @@ export * from './use-unmount.js';
|
|
|
8
8
|
export * from './use-effect-async.js';
|
|
9
9
|
export * from './use-abortable-callback.js';
|
|
10
10
|
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-update-layout-effect.js';
|
|
11
12
|
export * from './use-single-selection.js';
|
|
12
13
|
export * from './use-multiple-selection.js';
|
|
13
14
|
export * from './use-state-cycle.js';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}
|
|
@@ -3,5 +3,5 @@ export declare function useNumberInput({ value, lazy, onChange }: {
|
|
|
3
3
|
lazy?: boolean;
|
|
4
4
|
onChange(value: number, isEnd: boolean): void;
|
|
5
5
|
}): {
|
|
6
|
-
getInputProps(): Required<Pick<React.ComponentPropsWithoutRef<'input'>, 'value' | 'onChange' | 'onBlur'>>;
|
|
6
|
+
getInputProps(): Required<Pick<React.ComponentPropsWithoutRef<'input'>, 'type' | 'value' | 'onChange' | 'onBlur'>>;
|
|
7
7
|
};
|
package/lib/use-number-input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;
|
|
1
|
+
{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IASC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAE/B,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO;QACL,aAAa;YACX,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;wBAEvC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,CAAC,EAAE,CAAC;4BACvD,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;4BAIxB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEpC,OAAM;wBACR,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;4BAErB,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEjC,OAAM;wBACR,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useIsFirstRender } from './use-is-first-render.js';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
|
|
3
|
+
export function useUpdateLayoutEffect(effect, deps) {
|
|
4
|
+
const isFirstRender = useIsFirstRender();
|
|
5
|
+
useIsomorphicLayoutEffect(() => {
|
|
6
|
+
if (!isFirstRender()) {
|
|
7
|
+
return effect();
|
|
8
|
+
}
|
|
9
|
+
}, deps);
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=use-update-layout-effect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-update-layout-effect.js","sourceRoot":"","sources":["../src/use-update-layout-effect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAE7E,MAAM,UAAU,qBAAqB,CACnC,MAAsB,EACtB,IAA2B;IAE3B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACrB,OAAO,MAAM,EAAE,CAAA;QACjB,CAAC;IACH,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from './use-unmount.js'
|
|
|
8
8
|
export * from './use-effect-async.js'
|
|
9
9
|
export * from './use-abortable-callback.js'
|
|
10
10
|
export * from './use-update-effect.js'
|
|
11
|
+
export * from './use-update-layout-effect.js'
|
|
11
12
|
export * from './use-single-selection.js'
|
|
12
13
|
export * from './use-multiple-selection.js'
|
|
13
14
|
export * from './use-state-cycle.js'
|
package/src/use-number-input.ts
CHANGED
|
@@ -10,7 +10,8 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
10
10
|
}): {
|
|
11
11
|
getInputProps(): Required<Pick<
|
|
12
12
|
React.ComponentPropsWithoutRef<'input'>
|
|
13
|
-
, '
|
|
13
|
+
, 'type'
|
|
14
|
+
| 'value'
|
|
14
15
|
| 'onChange'
|
|
15
16
|
| 'onBlur'
|
|
16
17
|
>>
|
|
@@ -37,7 +38,8 @@ export function useNumberInput({ value, lazy, onChange }: {
|
|
|
37
38
|
return {
|
|
38
39
|
getInputProps() {
|
|
39
40
|
return {
|
|
40
|
-
|
|
41
|
+
type: 'number'
|
|
42
|
+
, value: displayValue
|
|
41
43
|
, onChange(e) {
|
|
42
44
|
setDisplayValue(e.target.value)
|
|
43
45
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { EffectCallback } from 'react'
|
|
2
|
+
import { useIsFirstRender } from './use-is-first-render.js'
|
|
3
|
+
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js'
|
|
4
|
+
|
|
5
|
+
export function useUpdateLayoutEffect(
|
|
6
|
+
effect: EffectCallback
|
|
7
|
+
, deps?: React.DependencyList
|
|
8
|
+
): void {
|
|
9
|
+
const isFirstRender = useIsFirstRender()
|
|
10
|
+
|
|
11
|
+
useIsomorphicLayoutEffect(() => {
|
|
12
|
+
if (!isFirstRender()) {
|
|
13
|
+
return effect()
|
|
14
|
+
}
|
|
15
|
+
}, deps)
|
|
16
|
+
}
|