react-simplikit 0.0.53 → 0.2.0
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/CHANGELOG.md +126 -0
- package/README.md +2 -42
- package/dist/hooks/useAsyncEffect/useAsyncEffect.cjs +1 -0
- package/dist/hooks/useAsyncEffect/useAsyncEffect.mjs +1 -0
- package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.cjs +1 -0
- package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.mjs +1 -0
- package/dist/hooks/useConditionalEffect/useConditionalEffect.cjs +1 -0
- package/dist/hooks/useConditionalEffect/useConditionalEffect.mjs +1 -0
- package/dist/hooks/useDebouncedCallback/useDebouncedCallback.cjs +24 -6
- package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.cts +17 -7
- package/dist/hooks/useDebouncedCallback/useDebouncedCallback.d.mts +17 -7
- package/dist/hooks/useDebouncedCallback/useDebouncedCallback.mjs +24 -6
- package/dist/hooks/useDoubleClick/useDoubleClick.cjs +0 -4
- package/dist/hooks/useDoubleClick/useDoubleClick.d.cts +0 -4
- package/dist/hooks/useDoubleClick/useDoubleClick.d.mts +0 -4
- package/dist/hooks/useDoubleClick/useDoubleClick.mjs +0 -4
- package/dist/hooks/useGeolocation/useGeolocation.cjs +0 -4
- package/dist/hooks/useGeolocation/useGeolocation.d.cts +0 -4
- package/dist/hooks/useGeolocation/useGeolocation.d.mts +0 -4
- package/dist/hooks/useGeolocation/useGeolocation.mjs +0 -4
- package/dist/hooks/useImpressionRef/useImpressionRef.cjs +7 -5
- package/dist/hooks/useImpressionRef/useImpressionRef.d.cts +0 -4
- package/dist/hooks/useImpressionRef/useImpressionRef.d.mts +0 -4
- package/dist/hooks/useImpressionRef/useImpressionRef.mjs +7 -5
- package/dist/hooks/useInputState/useInputState.cjs +9 -3
- package/dist/hooks/useInputState/useInputState.d.cts +11 -4
- package/dist/hooks/useInputState/useInputState.d.mts +11 -4
- package/dist/hooks/useInputState/useInputState.mjs +9 -3
- package/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -5
- package/dist/hooks/useIntersectionObserver/useIntersectionObserver.d.cts +1 -5
- package/dist/hooks/useIntersectionObserver/useIntersectionObserver.d.mts +1 -5
- package/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs +1 -5
- package/dist/hooks/useList/useList.cjs +11 -8
- package/dist/hooks/useList/useList.d.cts +12 -9
- package/dist/hooks/useList/useList.d.mts +12 -9
- package/dist/hooks/useList/useList.mjs +11 -8
- package/dist/hooks/useLoading/useLoading.cjs +3 -5
- package/dist/hooks/useLoading/useLoading.d.cts +2 -5
- package/dist/hooks/useLoading/useLoading.d.mts +2 -5
- package/dist/hooks/useLoading/useLoading.mjs +3 -5
- package/dist/hooks/useLongPress/useLongPress.cjs +0 -4
- package/dist/hooks/useLongPress/useLongPress.d.cts +0 -4
- package/dist/hooks/useLongPress/useLongPress.d.mts +0 -4
- package/dist/hooks/useLongPress/useLongPress.mjs +0 -4
- package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.cjs +0 -4
- package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.cts +0 -4
- package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.d.mts +0 -4
- package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs +0 -4
- package/dist/hooks/usePreservedReference/usePreservedReference.cjs +1 -0
- package/dist/hooks/usePreservedReference/usePreservedReference.mjs +1 -0
- package/dist/hooks/useRefEffect/useRefEffect.cjs +1 -0
- package/dist/hooks/useRefEffect/useRefEffect.mjs +1 -0
- package/dist/hooks/useSet/useSet.cjs +11 -2
- package/dist/hooks/useSet/useSet.d.cts +11 -2
- package/dist/hooks/useSet/useSet.d.mts +11 -2
- package/dist/hooks/useSet/useSet.mjs +11 -2
- package/dist/hooks/useStorageState/useStorageState.cjs +1 -0
- package/dist/hooks/useStorageState/useStorageState.d.cts +0 -4
- package/dist/hooks/useStorageState/useStorageState.d.mts +0 -4
- package/dist/hooks/useStorageState/useStorageState.mjs +1 -0
- package/dist/hooks/useThrottledCallback/useThrottledCallback.cjs +16 -9
- package/dist/hooks/useThrottledCallback/useThrottledCallback.d.cts +18 -11
- package/dist/hooks/useThrottledCallback/useThrottledCallback.d.mts +18 -11
- package/dist/hooks/useThrottledCallback/useThrottledCallback.mjs +16 -9
- package/dist/hooks/useVisibilityEvent/useVisibilityEvent.cjs +2 -4
- package/dist/hooks/useVisibilityEvent/useVisibilityEvent.d.cts +2 -4
- package/dist/hooks/useVisibilityEvent/useVisibilityEvent.d.mts +2 -4
- package/dist/hooks/useVisibilityEvent/useVisibilityEvent.mjs +2 -4
- package/dist/index.cjs +34 -0
- package/dist/index.d.cts +19 -1
- package/dist/index.d.mts +19 -1
- package/dist/index.mjs +18 -1
- package/dist/mobile/hooks/useAvoidKeyboard/index.d.cts +3 -0
- package/dist/mobile/hooks/useAvoidKeyboard/index.d.mts +3 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs +75 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.cts +89 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.d.mts +89 -0
- package/dist/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs +75 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs +47 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.cts +37 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.d.mts +37 -0
- package/dist/mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs +47 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.cts +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.d.mts +41 -0
- package/dist/mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs +41 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.cjs +88 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.cts +77 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.d.mts +77 -0
- package/dist/mobile/hooks/useNetworkStatus/useNetworkStatus.mjs +88 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.cjs +75 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.cts +64 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.d.mts +64 -0
- package/dist/mobile/hooks/usePageVisibility/usePageVisibility.mjs +75 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs +74 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.cts +55 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.d.mts +55 -0
- package/dist/mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs +74 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.cjs +79 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.cts +40 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.d.mts +40 -0
- package/dist/mobile/hooks/useScrollDirection/useScrollDirection.mjs +79 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.cjs +77 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.d.cts +89 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.d.mts +89 -0
- package/dist/mobile/hooks/useVisualViewport/useVisualViewport.mjs +77 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs +55 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.d.cts +22 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.d.mts +22 -0
- package/dist/mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs +55 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs +49 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.d.cts +23 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.d.mts +23 -0
- package/dist/mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs +49 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs +35 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.d.cts +28 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.d.mts +28 -0
- package/dist/mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs +35 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs +58 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.d.cts +44 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.d.mts +44 -0
- package/dist/mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs +58 -0
- package/dist/mobile/utils/isAndroid/isAndroid.cjs +32 -0
- package/dist/mobile/utils/isAndroid/isAndroid.d.cts +27 -0
- package/dist/mobile/utils/isAndroid/isAndroid.d.mts +27 -0
- package/dist/mobile/utils/isAndroid/isAndroid.mjs +32 -0
- package/dist/mobile/utils/isIOS/isIOS.cjs +37 -0
- package/dist/mobile/utils/isIOS/isIOS.d.cts +30 -0
- package/dist/mobile/utils/isIOS/isIOS.d.mts +30 -0
- package/dist/mobile/utils/isIOS/isIOS.mjs +37 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs +28 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.d.cts +25 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.d.mts +25 -0
- package/dist/mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs +28 -0
- package/dist/mobile/utils/isServer/isServer.cjs +24 -0
- package/dist/mobile/utils/isServer/isServer.d.cts +22 -0
- package/dist/mobile/utils/isServer/isServer.d.mts +22 -0
- package/dist/mobile/utils/isServer/isServer.mjs +24 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs +71 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.cts +64 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.mts +64 -0
- package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs +71 -0
- package/dist/utils/buildContext/buildContext.cjs +1 -0
- package/dist/utils/buildContext/buildContext.mjs +1 -0
- package/dist/utils/mergeProps/mergeProps.cjs +1 -1
- package/dist/utils/mergeProps/mergeProps.d.cts +1 -1
- package/dist/utils/mergeProps/mergeProps.d.mts +1 -1
- package/dist/utils/mergeProps/mergeProps.mjs +1 -1
- package/dist/utils/mergeRefs/mergeRefs.cjs +1 -1
- package/dist/utils/mergeRefs/mergeRefs.d.cts +1 -1
- package/dist/utils/mergeRefs/mergeRefs.d.mts +1 -1
- package/dist/utils/mergeRefs/mergeRefs.mjs +1 -1
- package/package.json +22 -10
|
@@ -14,8 +14,17 @@ type UseSetReturn<T> = [Omit<Set<T>, 'add' | 'clear' | 'delete'>, SetActions<T>]
|
|
|
14
14
|
* A React hook that manages a Set as state.
|
|
15
15
|
* Provides efficient state management and stable action functions.
|
|
16
16
|
*
|
|
17
|
-
* @
|
|
18
|
-
*
|
|
17
|
+
* @template T - The type of the values held in the set.
|
|
18
|
+
*
|
|
19
|
+
* @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
|
|
20
|
+
*
|
|
21
|
+
* @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
|
|
22
|
+
* - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
|
|
23
|
+
* - [1].add `(value: T) => void` - Adds a value to the set;
|
|
24
|
+
* - [1].remove `(value: T) => void` - Removes a value from the set;
|
|
25
|
+
* - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
|
|
26
|
+
* - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
|
|
27
|
+
* - [1].reset `() => void` - Resets the set to its initial state;
|
|
19
28
|
*
|
|
20
29
|
* @example
|
|
21
30
|
* ```tsx
|
|
@@ -8,8 +8,17 @@ import { useMemo, useState } from "react";
|
|
|
8
8
|
* A React hook that manages a Set as state.
|
|
9
9
|
* Provides efficient state management and stable action functions.
|
|
10
10
|
*
|
|
11
|
-
* @
|
|
12
|
-
*
|
|
11
|
+
* @template T - The type of the values held in the set.
|
|
12
|
+
*
|
|
13
|
+
* @param {SetOrValues<T>} [initialState=new Set()] - Initial Set state (Set object or array of values).
|
|
14
|
+
*
|
|
15
|
+
* @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it.
|
|
16
|
+
* - [0] `Omit<Set<T>, 'add' | 'clear' | 'delete'>` - The current Set state with mutation methods hidden;
|
|
17
|
+
* - [1].add `(value: T) => void` - Adds a value to the set;
|
|
18
|
+
* - [1].remove `(value: T) => void` - Removes a value from the set;
|
|
19
|
+
* - [1].toggle `(value: T) => void` - Adds the value if absent, removes it if present;
|
|
20
|
+
* - [1].setAll `(values: Set<T> | T[]) => void` - Replaces all values in the set;
|
|
21
|
+
* - [1].reset `() => void` - Resets the set to its initial state;
|
|
13
22
|
*
|
|
14
23
|
* @example
|
|
15
24
|
* ```tsx
|
|
@@ -20,6 +20,7 @@ const ensureSerializable = (value) => {
|
|
|
20
20
|
return value;
|
|
21
21
|
};
|
|
22
22
|
function useStorageState(key, { storage = require_storage.safeLocalStorage, defaultValue, ...options } = {}) {
|
|
23
|
+
"use no memo";
|
|
23
24
|
const serializedDefaultValue = defaultValue;
|
|
24
25
|
const cache = (0, react.useRef)({
|
|
25
26
|
data: null,
|
|
@@ -17,10 +17,6 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
|
|
|
17
17
|
};
|
|
18
18
|
type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
|
|
19
19
|
/**
|
|
20
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
|
|
21
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
22
|
-
* This hook will be removed in a future major version.
|
|
23
|
-
*
|
|
24
20
|
* @description
|
|
25
21
|
* `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
|
|
26
22
|
* The value is retained across page reloads and can be shared between tabs when using `localStorage`.
|
|
@@ -17,10 +17,6 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
|
|
|
17
17
|
};
|
|
18
18
|
type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
|
|
19
19
|
/**
|
|
20
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
|
|
21
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
22
|
-
* This hook will be removed in a future major version.
|
|
23
|
-
*
|
|
24
20
|
* @description
|
|
25
21
|
* `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
|
|
26
22
|
* The value is retained across page reloads and can be shared between tabs when using `localStorage`.
|
|
@@ -20,6 +20,7 @@ const ensureSerializable = (value) => {
|
|
|
20
20
|
return value;
|
|
21
21
|
};
|
|
22
22
|
function useStorageState(key, { storage = safeLocalStorage, defaultValue, ...options } = {}) {
|
|
23
|
+
"use no memo";
|
|
23
24
|
const serializedDefaultValue = defaultValue;
|
|
24
25
|
const cache = useRef({
|
|
25
26
|
data: null,
|
|
@@ -17,20 +17,27 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
|
|
|
17
17
|
* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
|
|
18
18
|
* The throttled callback will only be invoked at most once per specified interval.
|
|
19
19
|
*
|
|
20
|
+
* @template T - The type of the value passed to `onChange`.
|
|
20
21
|
* @param {Object} options - The options object.
|
|
21
|
-
* @param {
|
|
22
|
+
* @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
|
|
22
23
|
* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
|
|
23
24
|
* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
|
|
24
25
|
*
|
|
25
|
-
* @returns {
|
|
26
|
+
* @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
|
|
26
27
|
*
|
|
27
28
|
* @example
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
29
|
+
* import { useThrottledCallback } from 'react-simplikit';
|
|
30
|
+
* import { useState } from 'react';
|
|
31
|
+
*
|
|
32
|
+
* function ScrollPosition() {
|
|
33
|
+
* const [scrollTop, setScrollTop] = useState(0);
|
|
34
|
+
* const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
|
|
35
|
+
*
|
|
36
|
+
* return (
|
|
37
|
+
* <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
|
|
38
|
+
* <p>Scrolled {scrollTop}px</p>
|
|
39
|
+
* </div>
|
|
40
|
+
* );
|
|
34
41
|
* }
|
|
35
42
|
*/
|
|
36
43
|
function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
|
|
@@ -47,12 +54,12 @@ function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "tr
|
|
|
47
54
|
}, []);
|
|
48
55
|
const preservedEdges = require_usePreservedReference.usePreservedReference(edges);
|
|
49
56
|
return (0, react.useCallback)((nextValue) => {
|
|
57
|
+
ref.current.clearPreviousThrottle();
|
|
50
58
|
if (nextValue === ref.current.value) return;
|
|
51
59
|
const throttled = require_throttle.throttle(() => {
|
|
52
60
|
handleChange(nextValue);
|
|
53
61
|
ref.current.value = nextValue;
|
|
54
62
|
}, timeThreshold, { edges: preservedEdges });
|
|
55
|
-
ref.current.clearPreviousThrottle();
|
|
56
63
|
throttled();
|
|
57
64
|
ref.current.clearPreviousThrottle = throttled.cancel;
|
|
58
65
|
}, [
|
|
@@ -8,25 +8,32 @@ type ThrottleOptions = {
|
|
|
8
8
|
* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
|
|
9
9
|
* The throttled callback will only be invoked at most once per specified interval.
|
|
10
10
|
*
|
|
11
|
+
* @template T - The type of the value passed to `onChange`.
|
|
11
12
|
* @param {Object} options - The options object.
|
|
12
|
-
* @param {
|
|
13
|
+
* @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
|
|
13
14
|
* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
|
|
14
15
|
* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
|
|
15
16
|
*
|
|
16
|
-
* @returns {
|
|
17
|
+
* @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
|
|
17
18
|
*
|
|
18
19
|
* @example
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
20
|
+
* import { useThrottledCallback } from 'react-simplikit';
|
|
21
|
+
* import { useState } from 'react';
|
|
22
|
+
*
|
|
23
|
+
* function ScrollPosition() {
|
|
24
|
+
* const [scrollTop, setScrollTop] = useState(0);
|
|
25
|
+
* const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
|
|
26
|
+
*
|
|
27
|
+
* return (
|
|
28
|
+
* <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
|
|
29
|
+
* <p>Scrolled {scrollTop}px</p>
|
|
30
|
+
* </div>
|
|
31
|
+
* );
|
|
25
32
|
* }
|
|
26
33
|
*/
|
|
27
|
-
declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
|
|
28
|
-
onChange: (newValue:
|
|
34
|
+
declare function useThrottledCallback<T>({ onChange, timeThreshold, edges }: ThrottleOptions & {
|
|
35
|
+
onChange: (newValue: T) => void;
|
|
29
36
|
timeThreshold: number;
|
|
30
|
-
}): (nextValue:
|
|
37
|
+
}): (nextValue: T) => void;
|
|
31
38
|
//#endregion
|
|
32
39
|
export { useThrottledCallback };
|
|
@@ -8,25 +8,32 @@ type ThrottleOptions = {
|
|
|
8
8
|
* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
|
|
9
9
|
* The throttled callback will only be invoked at most once per specified interval.
|
|
10
10
|
*
|
|
11
|
+
* @template T - The type of the value passed to `onChange`.
|
|
11
12
|
* @param {Object} options - The options object.
|
|
12
|
-
* @param {
|
|
13
|
+
* @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
|
|
13
14
|
* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
|
|
14
15
|
* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
|
|
15
16
|
*
|
|
16
|
-
* @returns {
|
|
17
|
+
* @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
|
|
17
18
|
*
|
|
18
19
|
* @example
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
20
|
+
* import { useThrottledCallback } from 'react-simplikit';
|
|
21
|
+
* import { useState } from 'react';
|
|
22
|
+
*
|
|
23
|
+
* function ScrollPosition() {
|
|
24
|
+
* const [scrollTop, setScrollTop] = useState(0);
|
|
25
|
+
* const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
|
|
26
|
+
*
|
|
27
|
+
* return (
|
|
28
|
+
* <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
|
|
29
|
+
* <p>Scrolled {scrollTop}px</p>
|
|
30
|
+
* </div>
|
|
31
|
+
* );
|
|
25
32
|
* }
|
|
26
33
|
*/
|
|
27
|
-
declare function useThrottledCallback({ onChange, timeThreshold, edges }: ThrottleOptions & {
|
|
28
|
-
onChange: (newValue:
|
|
34
|
+
declare function useThrottledCallback<T>({ onChange, timeThreshold, edges }: ThrottleOptions & {
|
|
35
|
+
onChange: (newValue: T) => void;
|
|
29
36
|
timeThreshold: number;
|
|
30
|
-
}): (nextValue:
|
|
37
|
+
}): (nextValue: T) => void;
|
|
31
38
|
//#endregion
|
|
32
39
|
export { useThrottledCallback };
|
|
@@ -17,20 +17,27 @@ const NOT_INVOKED = Symbol("NOT_INVOKED");
|
|
|
17
17
|
* `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
|
|
18
18
|
* The throttled callback will only be invoked at most once per specified interval.
|
|
19
19
|
*
|
|
20
|
+
* @template T - The type of the value passed to `onChange`.
|
|
20
21
|
* @param {Object} options - The options object.
|
|
21
|
-
* @param {
|
|
22
|
+
* @param {(newValue: T) => void} options.onChange - The callback to throttle. A call with the same value as the last forwarded one is skipped.
|
|
22
23
|
* @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
|
|
23
24
|
* @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
|
|
24
25
|
*
|
|
25
|
-
* @returns {
|
|
26
|
+
* @returns {(nextValue: T) => void} A throttled function that forwards the value to `onChange` at most once per interval.
|
|
26
27
|
*
|
|
27
28
|
* @example
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
29
|
+
* import { useThrottledCallback } from 'react-simplikit';
|
|
30
|
+
* import { useState } from 'react';
|
|
31
|
+
*
|
|
32
|
+
* function ScrollPosition() {
|
|
33
|
+
* const [scrollTop, setScrollTop] = useState(0);
|
|
34
|
+
* const setScrollTopThrottled = useThrottledCallback({ onChange: setScrollTop, timeThreshold: 200 });
|
|
35
|
+
*
|
|
36
|
+
* return (
|
|
37
|
+
* <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
|
|
38
|
+
* <p>Scrolled {scrollTop}px</p>
|
|
39
|
+
* </div>
|
|
40
|
+
* );
|
|
34
41
|
* }
|
|
35
42
|
*/
|
|
36
43
|
function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
|
|
@@ -47,12 +54,12 @@ function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "tr
|
|
|
47
54
|
}, []);
|
|
48
55
|
const preservedEdges = usePreservedReference(edges);
|
|
49
56
|
return useCallback((nextValue) => {
|
|
57
|
+
ref.current.clearPreviousThrottle();
|
|
50
58
|
if (nextValue === ref.current.value) return;
|
|
51
59
|
const throttled = throttle(() => {
|
|
52
60
|
handleChange(nextValue);
|
|
53
61
|
ref.current.value = nextValue;
|
|
54
62
|
}, timeThreshold, { edges: preservedEdges });
|
|
55
|
-
ref.current.clearPreviousThrottle();
|
|
56
63
|
throttled();
|
|
57
64
|
ref.current.clearPreviousThrottle = throttled.cancel;
|
|
58
65
|
}, [
|
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
let react = require("react");
|
|
3
3
|
//#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
|
|
6
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
7
|
-
* This hook will be removed in a future major version.
|
|
8
|
-
*
|
|
9
5
|
* @description
|
|
10
6
|
* `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
|
|
11
7
|
*
|
|
8
|
+
* @see `usePageVisibility` returns the visibility as state instead of running a callback.
|
|
9
|
+
*
|
|
12
10
|
* @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
|
|
13
11
|
* when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
|
|
14
12
|
* @param {object} [options] - Optional configuration for the hook.
|
|
@@ -4,13 +4,11 @@ type Options = {
|
|
|
4
4
|
immediate?: boolean;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
|
|
8
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
9
|
-
* This hook will be removed in a future major version.
|
|
10
|
-
*
|
|
11
7
|
* @description
|
|
12
8
|
* `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
|
|
13
9
|
*
|
|
10
|
+
* @see `usePageVisibility` returns the visibility as state instead of running a callback.
|
|
11
|
+
*
|
|
14
12
|
* @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
|
|
15
13
|
* when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
|
|
16
14
|
* @param {object} [options] - Optional configuration for the hook.
|
|
@@ -4,13 +4,11 @@ type Options = {
|
|
|
4
4
|
immediate?: boolean;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
|
|
8
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
9
|
-
* This hook will be removed in a future major version.
|
|
10
|
-
*
|
|
11
7
|
* @description
|
|
12
8
|
* `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
|
|
13
9
|
*
|
|
10
|
+
* @see `usePageVisibility` returns the visibility as state instead of running a callback.
|
|
11
|
+
*
|
|
14
12
|
* @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
|
|
15
13
|
* when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
|
|
16
14
|
* @param {object} [options] - Optional configuration for the hook.
|
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
import { useCallback, useEffect } from "react";
|
|
3
3
|
//#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
|
|
6
|
-
* react-simplikit is now focused on platform-independent, pure state/logic hooks.
|
|
7
|
-
* This hook will be removed in a future major version.
|
|
8
|
-
*
|
|
9
5
|
* @description
|
|
10
6
|
* `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
|
|
11
7
|
*
|
|
8
|
+
* @see `usePageVisibility` returns the visibility as state instead of running a callback.
|
|
9
|
+
*
|
|
12
10
|
* @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
|
|
13
11
|
* when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
|
|
14
12
|
* @param {object} [options] - Optional configuration for the hook.
|
package/dist/index.cjs
CHANGED
|
@@ -36,15 +36,43 @@ const require_useThrottle = require("./hooks/useThrottle/useThrottle.cjs");
|
|
|
36
36
|
const require_useThrottledCallback = require("./hooks/useThrottledCallback/useThrottledCallback.cjs");
|
|
37
37
|
const require_useTimeout = require("./hooks/useTimeout/useTimeout.cjs");
|
|
38
38
|
const require_useToggle = require("./hooks/useToggle/useToggle.cjs");
|
|
39
|
+
const require_isServer = require("./mobile/utils/isServer/isServer.cjs");
|
|
40
|
+
const require_getKeyboardHeight = require("./mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs");
|
|
41
|
+
const require_subscribeKeyboardHeight = require("./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs");
|
|
42
|
+
const require_useKeyboardHeight = require("./mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs");
|
|
43
|
+
const require_useAvoidKeyboard = require("./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs");
|
|
44
|
+
const require_disableBodyScrollLock = require("./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs");
|
|
45
|
+
const require_enableBodyScrollLock = require("./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs");
|
|
46
|
+
const require_useBodyScrollLock = require("./mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs");
|
|
47
|
+
const require_useNetworkStatus = require("./mobile/hooks/useNetworkStatus/useNetworkStatus.cjs");
|
|
48
|
+
const require_usePageVisibility = require("./mobile/hooks/usePageVisibility/usePageVisibility.cjs");
|
|
49
|
+
const require_getSafeAreaInset = require("./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs");
|
|
50
|
+
const require_useSafeAreaInset = require("./mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs");
|
|
51
|
+
const require_useScrollDirection = require("./mobile/hooks/useScrollDirection/useScrollDirection.cjs");
|
|
52
|
+
const require_useVisualViewport = require("./mobile/hooks/useVisualViewport/useVisualViewport.cjs");
|
|
53
|
+
const require_isAndroid = require("./mobile/utils/isAndroid/isAndroid.cjs");
|
|
54
|
+
const require_isIOS = require("./mobile/utils/isIOS/isIOS.cjs");
|
|
55
|
+
const require_isKeyboardVisible = require("./mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs");
|
|
39
56
|
const require_buildContext = require("./utils/buildContext/buildContext.cjs");
|
|
40
57
|
const require_mergeProps = require("./utils/mergeProps/mergeProps.cjs");
|
|
41
58
|
exports.ImpressionArea = require_ImpressionArea.ImpressionArea;
|
|
42
59
|
exports.Separated = require_Separated.Separated;
|
|
43
60
|
exports.SwitchCase = require_SwitchCase.SwitchCase;
|
|
44
61
|
exports.buildContext = require_buildContext.buildContext;
|
|
62
|
+
exports.disableBodyScrollLock = require_disableBodyScrollLock.disableBodyScrollLock;
|
|
63
|
+
exports.enableBodyScrollLock = require_enableBodyScrollLock.enableBodyScrollLock;
|
|
64
|
+
exports.getKeyboardHeight = require_getKeyboardHeight.getKeyboardHeight;
|
|
65
|
+
exports.getSafeAreaInset = require_getSafeAreaInset.getSafeAreaInset;
|
|
66
|
+
exports.isAndroid = require_isAndroid.isAndroid;
|
|
67
|
+
exports.isIOS = require_isIOS.isIOS;
|
|
68
|
+
exports.isKeyboardVisible = require_isKeyboardVisible.isKeyboardVisible;
|
|
69
|
+
exports.isServer = require_isServer.isServer;
|
|
45
70
|
exports.mergeProps = require_mergeProps.mergeProps;
|
|
46
71
|
exports.mergeRefs = require_mergeRefs.mergeRefs;
|
|
72
|
+
exports.subscribeKeyboardHeight = require_subscribeKeyboardHeight.subscribeKeyboardHeight;
|
|
47
73
|
exports.useAsyncEffect = require_useAsyncEffect.useAsyncEffect;
|
|
74
|
+
exports.useAvoidKeyboard = require_useAvoidKeyboard.useAvoidKeyboard;
|
|
75
|
+
exports.useBodyScrollLock = require_useBodyScrollLock.useBodyScrollLock;
|
|
48
76
|
exports.useBooleanState = require_useBooleanState.useBooleanState;
|
|
49
77
|
exports.useCallbackOncePerRender = require_useCallbackOncePerRender.useCallbackOncePerRender;
|
|
50
78
|
exports.useConditionalEffect = require_useConditionalEffect.useConditionalEffect;
|
|
@@ -60,15 +88,20 @@ exports.useIntersectionObserver = require_useIntersectionObserver.useIntersectio
|
|
|
60
88
|
exports.useInterval = require_useInterval.useInterval;
|
|
61
89
|
exports.useIsClient = require_useIsClient.useIsClient;
|
|
62
90
|
exports.useIsomorphicLayoutEffect = require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
|
|
91
|
+
exports.useKeyboardHeight = require_useKeyboardHeight.useKeyboardHeight;
|
|
63
92
|
exports.useList = require_useList.useList;
|
|
64
93
|
exports.useLoading = require_useLoading.useLoading;
|
|
65
94
|
exports.useLongPress = require_useLongPress.useLongPress;
|
|
66
95
|
exports.useMap = require_useMap.useMap;
|
|
96
|
+
exports.useNetworkStatus = require_useNetworkStatus.useNetworkStatus;
|
|
67
97
|
exports.useOutsideClickEffect = require_useOutsideClickEffect.useOutsideClickEffect;
|
|
98
|
+
exports.usePageVisibility = require_usePageVisibility.usePageVisibility;
|
|
68
99
|
exports.usePreservedCallback = require_usePreservedCallback.usePreservedCallback;
|
|
69
100
|
exports.usePreservedReference = require_usePreservedReference.usePreservedReference;
|
|
70
101
|
exports.usePrevious = require_usePrevious.usePrevious;
|
|
71
102
|
exports.useRefEffect = require_useRefEffect.useRefEffect;
|
|
103
|
+
exports.useSafeAreaInset = require_useSafeAreaInset.useSafeAreaInset;
|
|
104
|
+
exports.useScrollDirection = require_useScrollDirection.useScrollDirection;
|
|
72
105
|
exports.useSet = require_useSet.useSet;
|
|
73
106
|
exports.useStorageState = require_useStorageState.useStorageState;
|
|
74
107
|
exports.useThrottle = require_useThrottle.useThrottle;
|
|
@@ -76,3 +109,4 @@ exports.useThrottledCallback = require_useThrottledCallback.useThrottledCallback
|
|
|
76
109
|
exports.useTimeout = require_useTimeout.useTimeout;
|
|
77
110
|
exports.useToggle = require_useToggle.useToggle;
|
|
78
111
|
exports.useVisibilityEvent = require_useVisibilityEvent.useVisibilityEvent;
|
|
112
|
+
exports.useVisualViewport = require_useVisualViewport.useVisualViewport;
|
package/dist/index.d.cts
CHANGED
|
@@ -47,10 +47,28 @@ import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledC
|
|
|
47
47
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.cjs";
|
|
48
48
|
import { useToggle } from "./hooks/useToggle/useToggle.cjs";
|
|
49
49
|
import { useVisibilityEvent } from "./hooks/useVisibilityEvent/useVisibilityEvent.cjs";
|
|
50
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.cjs";
|
|
51
|
+
import "./mobile/hooks/useAvoidKeyboard/index.cjs";
|
|
52
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.cjs";
|
|
53
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.cjs";
|
|
54
|
+
import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.cjs";
|
|
55
|
+
import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.cjs";
|
|
56
|
+
import { SafeAreaInset, getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.cjs";
|
|
57
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.cjs";
|
|
58
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.cjs";
|
|
59
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.cjs";
|
|
60
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.cjs";
|
|
61
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.cjs";
|
|
62
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.cjs";
|
|
63
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.cjs";
|
|
64
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.cjs";
|
|
65
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.cjs";
|
|
66
|
+
import { isServer } from "./mobile/utils/isServer/isServer.cjs";
|
|
67
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.cjs";
|
|
50
68
|
import { buildContext } from "./utils/buildContext/buildContext.cjs";
|
|
51
69
|
import "./utils/buildContext/index.cjs";
|
|
52
70
|
import { mergeProps } from "./utils/mergeProps/mergeProps.cjs";
|
|
53
71
|
import "./utils/mergeProps/index.cjs";
|
|
54
72
|
import { mergeRefs } from "./utils/mergeRefs/mergeRefs.cjs";
|
|
55
73
|
import "./utils/mergeRefs/index.cjs";
|
|
56
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
74
|
+
export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, type SafeAreaInset, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
package/dist/index.d.mts
CHANGED
|
@@ -47,10 +47,28 @@ import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledC
|
|
|
47
47
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.mjs";
|
|
48
48
|
import { useToggle } from "./hooks/useToggle/useToggle.mjs";
|
|
49
49
|
import { useVisibilityEvent } from "./hooks/useVisibilityEvent/useVisibilityEvent.mjs";
|
|
50
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs";
|
|
51
|
+
import "./mobile/hooks/useAvoidKeyboard/index.mjs";
|
|
52
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs";
|
|
53
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
|
|
54
|
+
import { ConnectionType, EffectiveConnectionType, NetworkStatus, useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
|
|
55
|
+
import { PageVisibility, VisibilityState, usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
|
|
56
|
+
import { SafeAreaInset, getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
|
|
57
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
|
|
58
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
|
|
59
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
|
|
60
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
|
|
61
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
|
|
62
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs";
|
|
63
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.mjs";
|
|
64
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.mjs";
|
|
65
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs";
|
|
66
|
+
import { isServer } from "./mobile/utils/isServer/isServer.mjs";
|
|
67
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
|
|
50
68
|
import { buildContext } from "./utils/buildContext/buildContext.mjs";
|
|
51
69
|
import "./utils/buildContext/index.mjs";
|
|
52
70
|
import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
|
|
53
71
|
import "./utils/mergeProps/index.mjs";
|
|
54
72
|
import { mergeRefs } from "./utils/mergeRefs/mergeRefs.mjs";
|
|
55
73
|
import "./utils/mergeRefs/index.mjs";
|
|
56
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
74
|
+
export { type ConnectionType, type EffectiveConnectionType, ImpressionArea, type NetworkStatus, type PageVisibility, type SafeAreaInset, Separated, SwitchCase, type VisibilityState, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
package/dist/index.mjs
CHANGED
|
@@ -35,6 +35,23 @@ import { useThrottle } from "./hooks/useThrottle/useThrottle.mjs";
|
|
|
35
35
|
import { useThrottledCallback } from "./hooks/useThrottledCallback/useThrottledCallback.mjs";
|
|
36
36
|
import { useTimeout } from "./hooks/useTimeout/useTimeout.mjs";
|
|
37
37
|
import { useToggle } from "./hooks/useToggle/useToggle.mjs";
|
|
38
|
+
import { isServer } from "./mobile/utils/isServer/isServer.mjs";
|
|
39
|
+
import { getKeyboardHeight } from "./mobile/utils/getKeyboardHeight/getKeyboardHeight.mjs";
|
|
40
|
+
import { subscribeKeyboardHeight } from "./mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs";
|
|
41
|
+
import { useKeyboardHeight } from "./mobile/hooks/useKeyboardHeight/useKeyboardHeight.mjs";
|
|
42
|
+
import { useAvoidKeyboard } from "./mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.mjs";
|
|
43
|
+
import { disableBodyScrollLock } from "./mobile/utils/disableBodyScrollLock/disableBodyScrollLock.mjs";
|
|
44
|
+
import { enableBodyScrollLock } from "./mobile/utils/enableBodyScrollLock/enableBodyScrollLock.mjs";
|
|
45
|
+
import { useBodyScrollLock } from "./mobile/hooks/useBodyScrollLock/useBodyScrollLock.mjs";
|
|
46
|
+
import { useNetworkStatus } from "./mobile/hooks/useNetworkStatus/useNetworkStatus.mjs";
|
|
47
|
+
import { usePageVisibility } from "./mobile/hooks/usePageVisibility/usePageVisibility.mjs";
|
|
48
|
+
import { getSafeAreaInset } from "./mobile/utils/getSafeAreaInset/getSafeAreaInset.mjs";
|
|
49
|
+
import { useSafeAreaInset } from "./mobile/hooks/useSafeAreaInset/useSafeAreaInset.mjs";
|
|
50
|
+
import { useScrollDirection } from "./mobile/hooks/useScrollDirection/useScrollDirection.mjs";
|
|
51
|
+
import { useVisualViewport } from "./mobile/hooks/useVisualViewport/useVisualViewport.mjs";
|
|
52
|
+
import { isAndroid } from "./mobile/utils/isAndroid/isAndroid.mjs";
|
|
53
|
+
import { isIOS } from "./mobile/utils/isIOS/isIOS.mjs";
|
|
54
|
+
import { isKeyboardVisible } from "./mobile/utils/isKeyboardVisible/isKeyboardVisible.mjs";
|
|
38
55
|
import { buildContext } from "./utils/buildContext/buildContext.mjs";
|
|
39
56
|
import { mergeProps } from "./utils/mergeProps/mergeProps.mjs";
|
|
40
|
-
export { ImpressionArea, Separated, SwitchCase, buildContext, mergeProps, mergeRefs, useAsyncEffect, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useList, useLoading, useLongPress, useMap, useOutsideClickEffect, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent };
|
|
57
|
+
export { ImpressionArea, Separated, SwitchCase, buildContext, disableBodyScrollLock, enableBodyScrollLock, getKeyboardHeight, getSafeAreaInset, isAndroid, isIOS, isKeyboardVisible, isServer, mergeProps, mergeRefs, subscribeKeyboardHeight, useAsyncEffect, useAvoidKeyboard, useBodyScrollLock, useBooleanState, useCallbackOncePerRender, useConditionalEffect, useControlledState, useCounter, useDebounce, useDebouncedCallback, useDoubleClick, useGeolocation, useImpressionRef, useInputState, useIntersectionObserver, useInterval, useIsClient, useIsomorphicLayoutEffect, useKeyboardHeight, useList, useLoading, useLongPress, useMap, useNetworkStatus, useOutsideClickEffect, usePageVisibility, usePreservedCallback, usePreservedReference, usePrevious, useRefEffect, useSafeAreaInset, useScrollDirection, useSet, useStorageState, useThrottle, useThrottledCallback, useTimeout, useToggle, useVisibilityEvent, useVisualViewport };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_useKeyboardHeight = require("../useKeyboardHeight/useKeyboardHeight.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region src/mobile/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
|
|
5
|
+
/**
|
|
6
|
+
* @description
|
|
7
|
+
* `useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
|
|
8
|
+
* It returns a CSS style that can be applied to `position: fixed` elements
|
|
9
|
+
* to smoothly move them above the keyboard when it appears.
|
|
10
|
+
*
|
|
11
|
+
* @param {UseAvoidKeyboardOptions} [options] - Configuration options.
|
|
12
|
+
* @param {number} [options.safeAreaBottom=0] - Base bottom offset in pixels when the keyboard is hidden. Useful for accounting for the iPhone home indicator area.
|
|
13
|
+
* @param {number} [options.transitionDuration=200] - Transition duration in milliseconds for smooth animation.
|
|
14
|
+
* @param {CSSProperties['transitionTimingFunction']} [options.transitionTimingFunction='ease-out'] - Transition timing function for the animation.
|
|
15
|
+
* @param {boolean} [options.immediate=true] - If true, gets the initial keyboard height on mount.
|
|
16
|
+
*
|
|
17
|
+
* @returns {UseAvoidKeyboardResult} An object containing the CSS style for keyboard avoidance.
|
|
18
|
+
* - style `CSSProperties` - CSS style object to apply to the fixed bottom element. Contains `transform` and `transition` properties;
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* function FixedBottomCTA() {
|
|
22
|
+
* const { style } = useAvoidKeyboard();
|
|
23
|
+
*
|
|
24
|
+
* return (
|
|
25
|
+
* <div
|
|
26
|
+
* style={{
|
|
27
|
+
* position: 'fixed',
|
|
28
|
+
* bottom: 0,
|
|
29
|
+
* left: 0,
|
|
30
|
+
* right: 0,
|
|
31
|
+
* ...style,
|
|
32
|
+
* }}
|
|
33
|
+
* >
|
|
34
|
+
* <button>Submit</button>
|
|
35
|
+
* </div>
|
|
36
|
+
* );
|
|
37
|
+
* }
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* // With safe area bottom offset (e.g., for iPhone home indicator)
|
|
41
|
+
* function FixedBottomCTA() {
|
|
42
|
+
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
|
|
43
|
+
*
|
|
44
|
+
* return (
|
|
45
|
+
* <div
|
|
46
|
+
* style={{
|
|
47
|
+
* position: 'fixed',
|
|
48
|
+
* bottom: 0,
|
|
49
|
+
* left: 0,
|
|
50
|
+
* right: 0,
|
|
51
|
+
* ...style,
|
|
52
|
+
* }}
|
|
53
|
+
* >
|
|
54
|
+
* <button>Submit</button>
|
|
55
|
+
* </div>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
*/
|
|
59
|
+
function useAvoidKeyboard(options = {}) {
|
|
60
|
+
const { safeAreaBottom = 0, transitionDuration = 200, transitionTimingFunction = "ease-out", immediate = true } = options;
|
|
61
|
+
const { keyboardHeight } = require_useKeyboardHeight.useKeyboardHeight({ immediate });
|
|
62
|
+
return { style: (0, react.useMemo)(() => {
|
|
63
|
+
return {
|
|
64
|
+
transform: `translateY(${keyboardHeight > 0 ? -(keyboardHeight + safeAreaBottom) : 0}px)`,
|
|
65
|
+
transition: `transform ${transitionDuration}ms ${transitionTimingFunction}`
|
|
66
|
+
};
|
|
67
|
+
}, [
|
|
68
|
+
keyboardHeight,
|
|
69
|
+
safeAreaBottom,
|
|
70
|
+
transitionDuration,
|
|
71
|
+
transitionTimingFunction
|
|
72
|
+
]) };
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
exports.useAvoidKeyboard = useAvoidKeyboard;
|