@reactuses/core 5.0.18 → 5.0.19-beta.2

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/dist/index.mjs CHANGED
@@ -3,7 +3,6 @@ import { isEqual, debounce, throttle } from 'lodash-es';
3
3
  import Cookies from 'js-cookie';
4
4
  import screenfull from 'screenfull';
5
5
  import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
6
- export { a as assignRef, m as mergeRefs, u as useMergedRefs } from './index-client-Qon46B4S.js';
7
6
 
8
7
  const useLatest = (value)=>{
9
8
  const ref = useRef(value);
@@ -199,7 +198,7 @@ const useClickOutside = (target, handler, enabled = true)=>{
199
198
  useEventListener('touchstart', listener, defaultWindow, listerOptions);
200
199
  };
201
200
 
202
- function getInitialState$4(key, defaultValue) {
201
+ function getInitialState$5(key, defaultValue) {
203
202
  // Prevent a React hydration mismatch when a default value is provided.
204
203
  if (defaultValue !== undefined) {
205
204
  return defaultValue;
@@ -213,7 +212,7 @@ function getInitialState$4(key, defaultValue) {
213
212
  return '';
214
213
  }
215
214
  const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
216
- const [cookieValue, setCookieValue] = useState(getInitialState$4(key, defaultValue));
215
+ const [cookieValue, setCookieValue] = useState(getInitialState$5(key, defaultValue));
217
216
  useEffect(()=>{
218
217
  const getStoredValue = ()=>{
219
218
  const raw = Cookies.get(key);
@@ -434,7 +433,7 @@ const defaultOptions = {
434
433
  observe: false
435
434
  };
436
435
 
437
- function getInitialState$3(defaultValue) {
436
+ function getInitialState$4(defaultValue) {
438
437
  // Prevent a React hydration mismatch when a default value is provided.
439
438
  if (defaultValue !== undefined) {
440
439
  return defaultValue;
@@ -449,7 +448,7 @@ function getInitialState$3(defaultValue) {
449
448
  }
450
449
  const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
451
450
  const { observe } = options;
452
- const [variable, setVariable] = useState(getInitialState$3(defaultValue));
451
+ const [variable, setVariable] = useState(getInitialState$4(defaultValue));
453
452
  const observerRef = useRef();
454
453
  const set = useCallback((v)=>{
455
454
  const element = getTargetElement(target);
@@ -571,7 +570,7 @@ const StorageSerializers = {
571
570
  write: (v)=>v.toISOString()
572
571
  }
573
572
  };
574
- function getInitialState$2(key, defaultValue, storage, serializer, onError) {
573
+ function getInitialState$3(key, defaultValue, storage, serializer, onError) {
575
574
  // Prevent a React hydration mismatch when a default value is provided.
576
575
  if (defaultValue !== undefined) {
577
576
  return defaultValue;
@@ -604,7 +603,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
604
603
  const type = guessSerializerType(defaultValue);
605
604
  var _options_serializer;
606
605
  const serializer = (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
607
- const [state, setState] = useState(getInitialState$2(key, defaultValue, storage, serializer, onError));
606
+ const [state, setState] = useState(getInitialState$3(key, defaultValue, storage, serializer, onError));
608
607
  useDeepCompareEffect(()=>{
609
608
  var _ref;
610
609
  const data = (_ref = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue) != null ? _ref : null;
@@ -747,7 +746,7 @@ const useDebounce = (value, wait, options)=>{
747
746
  return debounced;
748
747
  };
749
748
 
750
- function getInitialState$1(defaultValue) {
749
+ function getInitialState$2(defaultValue) {
751
750
  // Prevent a React hydration mismatch when a default value is provided.
752
751
  if (defaultValue !== undefined) {
753
752
  return defaultValue;
@@ -761,7 +760,7 @@ function getInitialState$1(defaultValue) {
761
760
  return 'visible';
762
761
  }
763
762
  function useDocumentVisibility(defaultValue) {
764
- const [visible, setVisible] = useState(getInitialState$1(defaultValue));
763
+ const [visible, setVisible] = useState(getInitialState$2(defaultValue));
765
764
  useEventListener('visibilitychange', ()=>{
766
765
  setVisible(document.visibilityState);
767
766
  }, ()=>document);
@@ -2027,7 +2026,7 @@ const useMediaDevices = (options = {})=>{
2027
2026
  ];
2028
2027
  };
2029
2028
 
2030
- function getInitialState(query, defaultState) {
2029
+ function getInitialState$1(query, defaultState) {
2031
2030
  // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
2032
2031
  if (defaultState !== undefined) {
2033
2032
  return defaultState;
@@ -2042,7 +2041,7 @@ function getInitialState(query, defaultState) {
2042
2041
  return false;
2043
2042
  }
2044
2043
  const useMediaQuery = (query, defaultState)=>{
2045
- const [state, setState] = useState(getInitialState(query, defaultState));
2044
+ const [state, setState] = useState(getInitialState$1(query, defaultState));
2046
2045
  useEffect(()=>{
2047
2046
  let mounted = true;
2048
2047
  const mql = window.matchMedia(query);
@@ -3494,6 +3493,30 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
3494
3493
  };
3495
3494
  };
3496
3495
 
3496
+ function assignRef(ref, value) {
3497
+ if (ref == null) return;
3498
+ if (typeof ref === 'function') {
3499
+ ref(value);
3500
+ return;
3501
+ }
3502
+ try {
3503
+ ref.current = value;
3504
+ } catch (error) {
3505
+ throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
3506
+ }
3507
+ }
3508
+ function mergeRefs(...refs) {
3509
+ return (node)=>{
3510
+ refs.forEach((ref)=>{
3511
+ assignRef(ref, node);
3512
+ });
3513
+ };
3514
+ }
3515
+ function useMergedRefs(...refs) {
3516
+ // eslint-disable-next-line react-hooks/exhaustive-deps
3517
+ return useMemo(()=>mergeRefs(...refs), refs);
3518
+ }
3519
+
3497
3520
  /**
3498
3521
  * @description copy from swr
3499
3522
  */ const use = React.use || ((thenable)=>{
@@ -3517,4 +3540,214 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
3517
3540
  }
3518
3541
  });
3519
3542
 
3520
- export { defaultOptions, use, useActiveElement, useAsyncEffect, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };
3543
+ function getInitialState(defaultState) {
3544
+ // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
3545
+ if (defaultState !== undefined) {
3546
+ return defaultState;
3547
+ }
3548
+ if (isBrowser) {
3549
+ const navigator1 = window.navigator;
3550
+ return navigator1.languages;
3551
+ }
3552
+ // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
3553
+ if (process.env.NODE_ENV !== 'production') {
3554
+ console.warn('`usePreferredLanguage` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
3555
+ }
3556
+ return [
3557
+ 'en'
3558
+ ];
3559
+ }
3560
+ const usePreferredLanguages = (defaultLanguages)=>{
3561
+ const [state, setState] = useState(getInitialState(defaultLanguages));
3562
+ useEventListener('languagechange', ()=>{
3563
+ setState(navigator.languages);
3564
+ });
3565
+ return state;
3566
+ };
3567
+
3568
+ const useBroadcastChannel = (options)=>{
3569
+ const { name } = options;
3570
+ const isSupported = useSupported(()=>window && 'BroadcastChannel' in window);
3571
+ const [isClosed, setIsClosed] = useState(false);
3572
+ const [data, setData] = useState();
3573
+ const [error, setError] = useState(null);
3574
+ const [timeStamp, setTimeStamp] = useState(0);
3575
+ const channelRef = useRef();
3576
+ const post = useCallback((data)=>{
3577
+ if (channelRef.current) {
3578
+ channelRef.current.postMessage(data);
3579
+ }
3580
+ }, []);
3581
+ const close = useCallback(()=>{
3582
+ if (channelRef.current) {
3583
+ channelRef.current.close();
3584
+ }
3585
+ setIsClosed(true);
3586
+ }, []);
3587
+ useEffect(()=>{
3588
+ if (isSupported) {
3589
+ channelRef.current = new BroadcastChannel(name);
3590
+ setError(null);
3591
+ const handleMessage = (e)=>{
3592
+ setData(e.data);
3593
+ // avoid data is same between two messages
3594
+ setTimeStamp(Date.now());
3595
+ };
3596
+ const handleError = (e)=>{
3597
+ setError(e);
3598
+ };
3599
+ const handleClose = ()=>{
3600
+ setIsClosed(true);
3601
+ };
3602
+ channelRef.current.addEventListener('message', handleMessage, {
3603
+ passive: true
3604
+ });
3605
+ channelRef.current.addEventListener('messageerror', handleError, {
3606
+ passive: true
3607
+ });
3608
+ channelRef.current.addEventListener('close', handleClose);
3609
+ return ()=>{
3610
+ if (channelRef.current) {
3611
+ channelRef.current.removeEventListener('message', handleMessage);
3612
+ channelRef.current.removeEventListener('messageerror', handleError);
3613
+ channelRef.current.removeEventListener('close', handleClose);
3614
+ close();
3615
+ }
3616
+ };
3617
+ }
3618
+ return close;
3619
+ }, [
3620
+ isSupported,
3621
+ name,
3622
+ close
3623
+ ]);
3624
+ return {
3625
+ isSupported,
3626
+ channel: channelRef.current,
3627
+ data,
3628
+ post,
3629
+ close,
3630
+ error,
3631
+ isClosed,
3632
+ timeStamp
3633
+ };
3634
+ };
3635
+
3636
+ const useDevicePixelRatio = ()=>{
3637
+ const [pixelRatio, setPixelRatio] = useState(1);
3638
+ const observe = useCallback(()=>{
3639
+ if (!window) return;
3640
+ setPixelRatio(window.devicePixelRatio);
3641
+ const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
3642
+ const handleChange = ()=>{
3643
+ observe();
3644
+ };
3645
+ media.addEventListener('change', handleChange, {
3646
+ once: true
3647
+ });
3648
+ return ()=>{
3649
+ media.removeEventListener('change', handleChange);
3650
+ };
3651
+ }, []);
3652
+ useEffect(()=>{
3653
+ const cleanup = observe();
3654
+ return cleanup;
3655
+ }, [
3656
+ observe
3657
+ ]);
3658
+ return {
3659
+ pixelRatio
3660
+ };
3661
+ };
3662
+
3663
+ const useElementByPoint = (options)=>{
3664
+ const { x, y, document: doc = typeof document !== 'undefined' ? document : null, multiple = false, interval = 'requestAnimationFrame', immediate = true } = options;
3665
+ const isSupported = useSupported(()=>{
3666
+ if (multiple) return doc && 'elementsFromPoint' in doc;
3667
+ return doc && 'elementFromPoint' in doc;
3668
+ });
3669
+ const [element, setElement] = useState(null);
3670
+ const [isActive, setIsActive] = useState(immediate);
3671
+ const rafIdRef = useRef(null);
3672
+ const intervalIdRef = useRef(null);
3673
+ const getXY = useCallback(()=>{
3674
+ // 需要判断 NaN
3675
+ const currentX = typeof x === 'function' ? x() : x;
3676
+ const currentY = typeof y === 'function' ? y() : y;
3677
+ return {
3678
+ x: Number.isNaN(currentX) ? 0 : currentX,
3679
+ y: Number.isNaN(currentY) ? 0 : currentY
3680
+ };
3681
+ }, [
3682
+ x,
3683
+ y
3684
+ ]);
3685
+ const cb = useCallback(()=>{
3686
+ const { x: currentX, y: currentY } = getXY();
3687
+ var _doc_elementsFromPoint, _doc_elementFromPoint;
3688
+ setElement(multiple ? (_doc_elementsFromPoint = doc == null ? void 0 : doc.elementsFromPoint(currentX, currentY)) != null ? _doc_elementsFromPoint : [] : (_doc_elementFromPoint = doc == null ? void 0 : doc.elementFromPoint(currentX, currentY)) != null ? _doc_elementFromPoint : null);
3689
+ }, [
3690
+ doc,
3691
+ multiple,
3692
+ getXY
3693
+ ]);
3694
+ const cleanup = useCallback(()=>{
3695
+ if (rafIdRef.current !== null) {
3696
+ cancelAnimationFrame(rafIdRef.current);
3697
+ rafIdRef.current = null;
3698
+ }
3699
+ if (intervalIdRef.current !== null) {
3700
+ clearInterval(intervalIdRef.current);
3701
+ intervalIdRef.current = null;
3702
+ }
3703
+ }, []);
3704
+ const pause = useCallback(()=>{
3705
+ setIsActive(false);
3706
+ cleanup();
3707
+ }, [
3708
+ cleanup
3709
+ ]);
3710
+ const resume = useCallback(()=>{
3711
+ setIsActive(true);
3712
+ }, []);
3713
+ useEffect(()=>{
3714
+ if (!isActive) {
3715
+ return;
3716
+ }
3717
+ if (interval === 'requestAnimationFrame') {
3718
+ const runRaf = ()=>{
3719
+ cb();
3720
+ rafIdRef.current = requestAnimationFrame(runRaf);
3721
+ };
3722
+ runRaf();
3723
+ } else {
3724
+ cb();
3725
+ intervalIdRef.current = setInterval(cb, interval);
3726
+ }
3727
+ return cleanup;
3728
+ }, [
3729
+ isActive,
3730
+ interval,
3731
+ cb,
3732
+ cleanup
3733
+ ]);
3734
+ useEffect(()=>{
3735
+ if (immediate) {
3736
+ resume();
3737
+ }
3738
+ return pause;
3739
+ }, [
3740
+ immediate,
3741
+ resume,
3742
+ pause
3743
+ ]);
3744
+ return {
3745
+ isSupported,
3746
+ element,
3747
+ pause,
3748
+ resume,
3749
+ isActive
3750
+ };
3751
+ };
3752
+
3753
+ export { assignRef, defaultOptions, mergeRefs, use, useActiveElement, useAsyncEffect, useBroadcastChannel, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDevicePixelRatio, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMergedRefs, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };
@@ -0,0 +1,95 @@
1
+ Object.defineProperty(exports, '__esModule', { value: true });
2
+
3
+ var QRCode = require('qrcode');
4
+ var react = require('react');
5
+ var lodashEs = require('lodash-es');
6
+
7
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
+
9
+ var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
10
+
11
+ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
12
+ if (process.env.NODE_ENV !== 'production') {
13
+ if (!Array.isArray(deps) || !deps.length) {
14
+ console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
15
+ }
16
+ if (typeof depsEqual !== 'function') {
17
+ console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
18
+ }
19
+ }
20
+ const ref = react.useRef(undefined);
21
+ if (!ref.current || !depsEqual(deps, ref.current)) {
22
+ ref.current = deps;
23
+ }
24
+ // eslint-disable-next-line react-hooks/exhaustive-deps
25
+ react.useEffect(effect, ref.current);
26
+ };
27
+
28
+ const useDeepCompareEffect = (effect, deps)=>{
29
+ if (process.env.NODE_ENV !== 'production') {
30
+ if (!Array.isArray(deps) || !deps.length) {
31
+ console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
32
+ }
33
+ }
34
+ useCustomCompareEffect(effect, deps, lodashEs.isEqual);
35
+ };
36
+
37
+ const defaultOptions = {};
38
+
39
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
40
+ try {
41
+ var info = gen[key](arg);
42
+ var value = info.value;
43
+ } catch (error) {
44
+ reject(error);
45
+ return;
46
+ }
47
+ if (info.done) {
48
+ resolve(value);
49
+ } else {
50
+ Promise.resolve(value).then(_next, _throw);
51
+ }
52
+ }
53
+ function _async_to_generator(fn) {
54
+ return function() {
55
+ var self = this, args = arguments;
56
+ return new Promise(function(resolve, reject) {
57
+ var gen = fn.apply(self, args);
58
+ function _next(value) {
59
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
60
+ }
61
+ function _throw(err) {
62
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
63
+ }
64
+ _next(undefined);
65
+ });
66
+ };
67
+ }
68
+ function generateQRCode(text, options) {
69
+ return QRCode__default.default.toDataURL(text, options);
70
+ }
71
+ const useQRCode = (text, options = defaultOptions)=>{
72
+ const [qrCode, setQRCode] = react.useState('');
73
+ const [error, setError] = react.useState(null);
74
+ useDeepCompareEffect(()=>{
75
+ const generate = /*#__PURE__*/ _async_to_generator(function*() {
76
+ try {
77
+ const qrCode = yield generateQRCode(text, options);
78
+ setQRCode(qrCode);
79
+ } catch (error) {
80
+ setError(error);
81
+ }
82
+ });
83
+ generate();
84
+ }, [
85
+ text,
86
+ options
87
+ ]);
88
+ return {
89
+ qrCode,
90
+ error
91
+ };
92
+ };
93
+
94
+ exports.generateQRCode = generateQRCode;
95
+ exports.useQRCode = useQRCode;
@@ -0,0 +1,36 @@
1
+ import QRCode from 'qrcode';
2
+
3
+ /**
4
+ * @title UseQRCode
5
+ */
6
+ type UseQRCode = (
7
+ /**
8
+ * @zh 文本
9
+ * @en Text
10
+ */
11
+ text: string,
12
+ /**
13
+ * @zh 传递给 `QRCode.toDataURL` 的选项
14
+ * @en Options passed to `QRCode.toDataURL`
15
+ */
16
+ options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
17
+ /**
18
+ * @title UseQRCodeReturn
19
+ */
20
+ interface UseQRCodeReturn {
21
+ /**
22
+ * @zh 生成的二维码
23
+ * @en Generated QR code
24
+ */
25
+ qrCode: string;
26
+ /**
27
+ * @zh 错误
28
+ * @en Error
29
+ */
30
+ error: unknown;
31
+ }
32
+
33
+ declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
34
+ declare const useQRCode: UseQRCode;
35
+
36
+ export { generateQRCode, useQRCode };
@@ -0,0 +1,36 @@
1
+ import QRCode from 'qrcode';
2
+
3
+ /**
4
+ * @title UseQRCode
5
+ */
6
+ type UseQRCode = (
7
+ /**
8
+ * @zh 文本
9
+ * @en Text
10
+ */
11
+ text: string,
12
+ /**
13
+ * @zh 传递给 `QRCode.toDataURL` 的选项
14
+ * @en Options passed to `QRCode.toDataURL`
15
+ */
16
+ options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
17
+ /**
18
+ * @title UseQRCodeReturn
19
+ */
20
+ interface UseQRCodeReturn {
21
+ /**
22
+ * @zh 生成的二维码
23
+ * @en Generated QR code
24
+ */
25
+ qrCode: string;
26
+ /**
27
+ * @zh 错误
28
+ * @en Error
29
+ */
30
+ error: unknown;
31
+ }
32
+
33
+ declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
34
+ declare const useQRCode: UseQRCode;
35
+
36
+ export { generateQRCode, useQRCode };
@@ -0,0 +1,88 @@
1
+ import QRCode from 'qrcode';
2
+ import { useRef, useEffect, useState } from 'react';
3
+ import { isEqual } from 'lodash-es';
4
+
5
+ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
6
+ if (process.env.NODE_ENV !== 'production') {
7
+ if (!Array.isArray(deps) || !deps.length) {
8
+ console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
9
+ }
10
+ if (typeof depsEqual !== 'function') {
11
+ console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
12
+ }
13
+ }
14
+ const ref = useRef(undefined);
15
+ if (!ref.current || !depsEqual(deps, ref.current)) {
16
+ ref.current = deps;
17
+ }
18
+ // eslint-disable-next-line react-hooks/exhaustive-deps
19
+ useEffect(effect, ref.current);
20
+ };
21
+
22
+ const useDeepCompareEffect = (effect, deps)=>{
23
+ if (process.env.NODE_ENV !== 'production') {
24
+ if (!Array.isArray(deps) || !deps.length) {
25
+ console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
26
+ }
27
+ }
28
+ useCustomCompareEffect(effect, deps, isEqual);
29
+ };
30
+
31
+ const defaultOptions = {};
32
+
33
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
34
+ try {
35
+ var info = gen[key](arg);
36
+ var value = info.value;
37
+ } catch (error) {
38
+ reject(error);
39
+ return;
40
+ }
41
+ if (info.done) {
42
+ resolve(value);
43
+ } else {
44
+ Promise.resolve(value).then(_next, _throw);
45
+ }
46
+ }
47
+ function _async_to_generator(fn) {
48
+ return function() {
49
+ var self = this, args = arguments;
50
+ return new Promise(function(resolve, reject) {
51
+ var gen = fn.apply(self, args);
52
+ function _next(value) {
53
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
54
+ }
55
+ function _throw(err) {
56
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
57
+ }
58
+ _next(undefined);
59
+ });
60
+ };
61
+ }
62
+ function generateQRCode(text, options) {
63
+ return QRCode.toDataURL(text, options);
64
+ }
65
+ const useQRCode = (text, options = defaultOptions)=>{
66
+ const [qrCode, setQRCode] = useState('');
67
+ const [error, setError] = useState(null);
68
+ useDeepCompareEffect(()=>{
69
+ const generate = /*#__PURE__*/ _async_to_generator(function*() {
70
+ try {
71
+ const qrCode = yield generateQRCode(text, options);
72
+ setQRCode(qrCode);
73
+ } catch (error) {
74
+ setError(error);
75
+ }
76
+ });
77
+ generate();
78
+ }, [
79
+ text,
80
+ options
81
+ ]);
82
+ return {
83
+ qrCode,
84
+ error
85
+ };
86
+ };
87
+
88
+ export { generateQRCode, useQRCode };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reactuses/core",
3
- "version": "5.0.18",
3
+ "version": "5.0.19-beta.2",
4
4
  "license": "Unlicense",
5
5
  "homepage": "https://www.reactuse.com/",
6
6
  "repository": {
@@ -31,6 +31,16 @@
31
31
  "types": "./dist/index.d.cts",
32
32
  "default": "./dist/index.cjs"
33
33
  }
34
+ },
35
+ "./useQRCode": {
36
+ "import": {
37
+ "types": "./dist/useQRCode.d.mts",
38
+ "default": "./dist/useQRCode.mjs"
39
+ },
40
+ "require": {
41
+ "types": "./dist/useQRCode.d.cts",
42
+ "default": "./dist/useQRCode.cjs"
43
+ }
34
44
  }
35
45
  },
36
46
  "main": "./dist/index.cjs",
@@ -55,8 +65,14 @@
55
65
  "test:coverage": "jest --coverage"
56
66
  },
57
67
  "peerDependencies": {
68
+ "qrcode": "^1.5",
58
69
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
59
70
  },
71
+ "peerDependenciesMeta": {
72
+ "qrcode": {
73
+ "optional": true
74
+ }
75
+ },
60
76
  "dependencies": {
61
77
  "js-cookie": "^3.0.5",
62
78
  "lodash-es": "^4.17.21",
@@ -71,6 +87,7 @@
71
87
  "@types/js-cookie": "^3.0.3",
72
88
  "@types/lodash": "^4.14.184",
73
89
  "@types/lodash-es": "^4.17.7",
90
+ "@types/qrcode": "^1.5.5",
74
91
  "@types/use-sync-external-store": "^0.0.6",
75
92
  "babel-jest": "^29.0.2",
76
93
  "consola": "^2.15.3",
@@ -80,6 +97,7 @@
80
97
  "jest-environment-jsdom": "^29.0.2",
81
98
  "jest-environment-node": "^29.7.0",
82
99
  "lodash": "^4.17.21",
100
+ "qrcode": "^1.5.3",
83
101
  "react": "^18.2.0",
84
102
  "react-dom": "^18.2.0",
85
103
  "typescript": "^5.3.3"
@@ -1,30 +0,0 @@
1
- 'use client';
2
- var React = require('react');
3
-
4
- function assignRef(ref, value) {
5
- if (ref == null) return;
6
- if (typeof ref === 'function') {
7
- ref(value);
8
- return;
9
- }
10
- try {
11
- ref.current = value;
12
- } catch (error) {
13
- throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
14
- }
15
- }
16
- function mergeRefs(...refs) {
17
- return (node)=>{
18
- refs.forEach((ref)=>{
19
- assignRef(ref, node);
20
- });
21
- };
22
- }
23
- function useMergedRefs(...refs) {
24
- // eslint-disable-next-line react-hooks/exhaustive-deps
25
- return React.useMemo(()=>mergeRefs(...refs), refs);
26
- }
27
-
28
- exports.assignRef = assignRef;
29
- exports.mergeRefs = mergeRefs;
30
- exports.useMergedRefs = useMergedRefs;