@grantpearceuk/hooks 0.1.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/README.md +403 -0
- package/lib/cjs/global.d.d.ts +7 -0
- package/lib/cjs/global.d.js +2 -0
- package/lib/cjs/index.d.ts +32 -0
- package/lib/cjs/index.js +69 -0
- package/lib/cjs/useArray/index.d.ts +2 -0
- package/lib/cjs/useArray/index.js +43 -0
- package/lib/cjs/useAsync/index.d.ts +2 -0
- package/lib/cjs/useAsync/index.js +29 -0
- package/lib/cjs/useClickOutside/index.d.ts +5 -0
- package/lib/cjs/useClickOutside/index.js +14 -0
- package/lib/cjs/useCookie/index.d.ts +2 -0
- package/lib/cjs/useCookie/index.js +26 -0
- package/lib/cjs/useCopyToClipboard/index.d.ts +2 -0
- package/lib/cjs/useCopyToClipboard/index.js +20 -0
- package/lib/cjs/useDarkMode/index.d.ts +4 -0
- package/lib/cjs/useDarkMode/index.js +18 -0
- package/lib/cjs/useDebounce/index.d.ts +2 -0
- package/lib/cjs/useDebounce/index.js +22 -0
- package/lib/cjs/useDebugInformation/index.d.ts +8 -0
- package/lib/cjs/useDebugInformation/index.js +44 -0
- package/lib/cjs/useDeepCompareEffect/index.d.ts +2 -0
- package/lib/cjs/useDeepCompareEffect/index.js +16 -0
- package/lib/cjs/useEffectOnce/index.d.ts +1 -0
- package/lib/cjs/useEffectOnce/index.js +7 -0
- package/lib/cjs/useEventListener/index.d.ts +2 -0
- package/lib/cjs/useEventListener/index.js +18 -0
- package/lib/cjs/useFetch/index.d.ts +2 -0
- package/lib/cjs/useFetch/index.js +82 -0
- package/lib/cjs/useGenerateHtmlId/index.d.ts +3 -0
- package/lib/cjs/useGenerateHtmlId/index.js +9 -0
- package/lib/cjs/useGeolocation/index.d.ts +2 -0
- package/lib/cjs/useGeolocation/index.js +26 -0
- package/lib/cjs/useHover/index.d.ts +2 -0
- package/lib/cjs/useHover/index.js +17 -0
- package/lib/cjs/useLongPress/index.d.ts +4 -0
- package/lib/cjs/useLongPress/index.js +19 -0
- package/lib/cjs/useMediaQuery/index.d.ts +1 -0
- package/lib/cjs/useMediaQuery/index.js +22 -0
- package/lib/cjs/useOnScreen/index.d.ts +2 -0
- package/lib/cjs/useOnScreen/index.js +23 -0
- package/lib/cjs/useOnlineStatus/index.d.ts +1 -0
- package/lib/cjs/useOnlineStatus/index.js +14 -0
- package/lib/cjs/usePagination/index.d.ts +9 -0
- package/lib/cjs/usePagination/index.js +22 -0
- package/lib/cjs/usePrevious/index.d.ts +2 -0
- package/lib/cjs/usePrevious/index.js +13 -0
- package/lib/cjs/useRenderCount/index.d.ts +1 -0
- package/lib/cjs/useRenderCount/index.js +11 -0
- package/lib/cjs/useScript/index.d.ts +2 -0
- package/lib/cjs/useScript/index.js +19 -0
- package/lib/cjs/useSize/index.d.ts +3 -0
- package/lib/cjs/useSize/index.js +18 -0
- package/lib/cjs/useStateWithHistory/index.d.ts +4 -0
- package/lib/cjs/useStateWithHistory/index.js +53 -0
- package/lib/cjs/useStateWithValidation/index.d.ts +2 -0
- package/lib/cjs/useStateWithValidation/index.js +14 -0
- package/lib/cjs/useStorage/index.d.ts +5 -0
- package/lib/cjs/useStorage/index.js +33 -0
- package/lib/cjs/useTimeout/index.d.ts +2 -0
- package/lib/cjs/useTimeout/index.js +26 -0
- package/lib/cjs/useToggle/index.d.ts +2 -0
- package/lib/cjs/useToggle/index.js +12 -0
- package/lib/cjs/useUpdateEffect/index.d.ts +2 -0
- package/lib/cjs/useUpdateEffect/index.js +14 -0
- package/lib/cjs/useWindowSize/index.d.ts +2 -0
- package/lib/cjs/useWindowSize/index.js +18 -0
- package/lib/esm/global.d.d.ts +7 -0
- package/lib/esm/global.d.js +1 -0
- package/lib/esm/index.d.ts +32 -0
- package/lib/esm/index.js +32 -0
- package/lib/esm/useArray/index.d.ts +2 -0
- package/lib/esm/useArray/index.js +40 -0
- package/lib/esm/useAsync/index.d.ts +2 -0
- package/lib/esm/useAsync/index.js +26 -0
- package/lib/esm/useClickOutside/index.d.ts +5 -0
- package/lib/esm/useClickOutside/index.js +8 -0
- package/lib/esm/useCookie/index.d.ts +2 -0
- package/lib/esm/useCookie/index.js +20 -0
- package/lib/esm/useCopyToClipboard/index.d.ts +2 -0
- package/lib/esm/useCopyToClipboard/index.js +14 -0
- package/lib/esm/useDarkMode/index.d.ts +4 -0
- package/lib/esm/useDarkMode/index.js +12 -0
- package/lib/esm/useDebounce/index.d.ts +2 -0
- package/lib/esm/useDebounce/index.js +16 -0
- package/lib/esm/useDebugInformation/index.d.ts +8 -0
- package/lib/esm/useDebugInformation/index.js +38 -0
- package/lib/esm/useDeepCompareEffect/index.d.ts +2 -0
- package/lib/esm/useDeepCompareEffect/index.js +10 -0
- package/lib/esm/useEffectOnce/index.d.ts +1 -0
- package/lib/esm/useEffectOnce/index.js +4 -0
- package/lib/esm/useEventListener/index.d.ts +2 -0
- package/lib/esm/useEventListener/index.js +15 -0
- package/lib/esm/useFetch/index.d.ts +2 -0
- package/lib/esm/useFetch/index.js +76 -0
- package/lib/esm/useGenerateHtmlId/index.d.ts +3 -0
- package/lib/esm/useGenerateHtmlId/index.js +7 -0
- package/lib/esm/useGeolocation/index.d.ts +2 -0
- package/lib/esm/useGeolocation/index.js +23 -0
- package/lib/esm/useHover/index.d.ts +2 -0
- package/lib/esm/useHover/index.js +11 -0
- package/lib/esm/useLongPress/index.d.ts +4 -0
- package/lib/esm/useLongPress/index.js +13 -0
- package/lib/esm/useMediaQuery/index.d.ts +1 -0
- package/lib/esm/useMediaQuery/index.js +16 -0
- package/lib/esm/useOnScreen/index.d.ts +2 -0
- package/lib/esm/useOnScreen/index.js +20 -0
- package/lib/esm/useOnlineStatus/index.d.ts +1 -0
- package/lib/esm/useOnlineStatus/index.js +8 -0
- package/lib/esm/usePagination/index.d.ts +9 -0
- package/lib/esm/usePagination/index.js +19 -0
- package/lib/esm/usePrevious/index.d.ts +2 -0
- package/lib/esm/usePrevious/index.js +10 -0
- package/lib/esm/useRenderCount/index.d.ts +1 -0
- package/lib/esm/useRenderCount/index.js +8 -0
- package/lib/esm/useScript/index.d.ts +2 -0
- package/lib/esm/useScript/index.js +13 -0
- package/lib/esm/useSize/index.d.ts +3 -0
- package/lib/esm/useSize/index.js +15 -0
- package/lib/esm/useStateWithHistory/index.d.ts +4 -0
- package/lib/esm/useStateWithHistory/index.js +50 -0
- package/lib/esm/useStateWithValidation/index.d.ts +2 -0
- package/lib/esm/useStateWithValidation/index.js +11 -0
- package/lib/esm/useStorage/index.d.ts +5 -0
- package/lib/esm/useStorage/index.js +28 -0
- package/lib/esm/useTimeout/index.d.ts +2 -0
- package/lib/esm/useTimeout/index.js +23 -0
- package/lib/esm/useToggle/index.d.ts +2 -0
- package/lib/esm/useToggle/index.js +9 -0
- package/lib/esm/useUpdateEffect/index.d.ts +2 -0
- package/lib/esm/useUpdateEffect/index.js +11 -0
- package/lib/esm/useWindowSize/index.d.ts +2 -0
- package/lib/esm/useWindowSize/index.js +12 -0
- package/package.json +49 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useSessionStorage = exports.useLocalStorage = void 0;
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
+
var react_1 = require("react");
|
|
6
|
+
var FUNCTION = "function";
|
|
7
|
+
function useLocalStorage(key, defaultValue) {
|
|
8
|
+
if (defaultValue === void 0) { defaultValue = ""; }
|
|
9
|
+
return useStorage(key, defaultValue, window.localStorage);
|
|
10
|
+
}
|
|
11
|
+
exports.useLocalStorage = useLocalStorage;
|
|
12
|
+
function useSessionStorage(key, defaultValue) {
|
|
13
|
+
if (defaultValue === void 0) { defaultValue = ""; }
|
|
14
|
+
return useStorage(key, defaultValue, window.sessionStorage);
|
|
15
|
+
}
|
|
16
|
+
exports.useSessionStorage = useSessionStorage;
|
|
17
|
+
function useStorage(key, defaultValue, storageObject) {
|
|
18
|
+
var _a = (0, react_1.useState)(function () {
|
|
19
|
+
var jsonValue = storageObject.getItem(key);
|
|
20
|
+
if (jsonValue != null)
|
|
21
|
+
return JSON.parse(jsonValue);
|
|
22
|
+
return typeof defaultValue === FUNCTION ? defaultValue() : defaultValue;
|
|
23
|
+
}), value = _a[0], setValue = _a[1];
|
|
24
|
+
(0, react_1.useEffect)(function () {
|
|
25
|
+
if (value === undefined)
|
|
26
|
+
return storageObject.removeItem(key);
|
|
27
|
+
storageObject.setItem(key, JSON.stringify(value));
|
|
28
|
+
}, [key, value, storageObject]);
|
|
29
|
+
var remove = (0, react_1.useCallback)(function () {
|
|
30
|
+
setValue(undefined);
|
|
31
|
+
}, []);
|
|
32
|
+
return [value, setValue, remove];
|
|
33
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_1 = require("react");
|
|
4
|
+
function useTimeout(callback, delay) {
|
|
5
|
+
var callbackRef = (0, react_1.useRef)(callback);
|
|
6
|
+
var timeoutRef = (0, react_1.useRef)(null);
|
|
7
|
+
(0, react_1.useEffect)(function () {
|
|
8
|
+
callbackRef.current = callback;
|
|
9
|
+
}, [callback]);
|
|
10
|
+
var set = (0, react_1.useCallback)(function () {
|
|
11
|
+
timeoutRef.current = setTimeout(function () { return callbackRef.current(); }, delay);
|
|
12
|
+
}, [delay]);
|
|
13
|
+
var clear = (0, react_1.useCallback)(function () {
|
|
14
|
+
timeoutRef.current && clearTimeout(timeoutRef.current);
|
|
15
|
+
}, []);
|
|
16
|
+
(0, react_1.useEffect)(function () {
|
|
17
|
+
set();
|
|
18
|
+
return clear;
|
|
19
|
+
}, [delay, set, clear]);
|
|
20
|
+
var reset = (0, react_1.useCallback)(function () {
|
|
21
|
+
clear();
|
|
22
|
+
set();
|
|
23
|
+
}, [clear, set]);
|
|
24
|
+
return { reset: reset, clear: clear };
|
|
25
|
+
}
|
|
26
|
+
exports.default = useTimeout;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_1 = require("react");
|
|
4
|
+
function useToggle(defaultValue) {
|
|
5
|
+
if (defaultValue === void 0) { defaultValue = false; }
|
|
6
|
+
var _a = (0, react_1.useState)(defaultValue), value = _a[0], setValue = _a[1];
|
|
7
|
+
function toggleValue(newValue) {
|
|
8
|
+
setValue(function (currentValue) { return (typeof newValue === "boolean" ? newValue : !currentValue); });
|
|
9
|
+
}
|
|
10
|
+
return [value, toggleValue];
|
|
11
|
+
}
|
|
12
|
+
exports.default = useToggle;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_1 = require("react");
|
|
4
|
+
function useUpdateEffect(callback, dependencies) {
|
|
5
|
+
var firstRenderRef = (0, react_1.useRef)(true);
|
|
6
|
+
(0, react_1.useEffect)(function () {
|
|
7
|
+
if (firstRenderRef.current) {
|
|
8
|
+
firstRenderRef.current = false;
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
return callback();
|
|
12
|
+
}, dependencies);
|
|
13
|
+
}
|
|
14
|
+
exports.default = useUpdateEffect;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = require("react");
|
|
7
|
+
var useEventListener_1 = __importDefault(require("../useEventListener"));
|
|
8
|
+
function useWindowSize() {
|
|
9
|
+
var _a = (0, react_1.useState)({
|
|
10
|
+
width: window.innerWidth,
|
|
11
|
+
height: window.innerHeight,
|
|
12
|
+
}), windowSize = _a[0], setWindowSize = _a[1];
|
|
13
|
+
(0, useEventListener_1.default)("resize", function () {
|
|
14
|
+
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
|
|
15
|
+
});
|
|
16
|
+
return windowSize;
|
|
17
|
+
}
|
|
18
|
+
exports.default = useWindowSize;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import useArray from "./useArray";
|
|
2
|
+
import useAsync from "./useAsync";
|
|
3
|
+
import useClickOutside from "./useClickOutside";
|
|
4
|
+
import useCookie from "./useCookie";
|
|
5
|
+
import useCopyToClipboard from "./useCopyToClipboard";
|
|
6
|
+
import useDarkMode from "./useDarkMode";
|
|
7
|
+
import useDebounce from "./useDebounce";
|
|
8
|
+
import useDebugInformation from "./useDebugInformation";
|
|
9
|
+
import useDeepCompareEffect from "./useDeepCompareEffect";
|
|
10
|
+
import useEffectOnce from "./useEffectOnce";
|
|
11
|
+
import useEventListener from "./useEventListener";
|
|
12
|
+
import useFetch from "./useFetch";
|
|
13
|
+
import useGenerateHtmlId from "./useGenerateHtmlId";
|
|
14
|
+
import useGeolocation from "./useGeolocation";
|
|
15
|
+
import useHover from "./useHover";
|
|
16
|
+
import useLongPress from "./useLongPress";
|
|
17
|
+
import useMediaQuery from "./useMediaQuery";
|
|
18
|
+
import useOnlineStatus from "./useOnlineStatus";
|
|
19
|
+
import useOnScreen from "./useOnScreen";
|
|
20
|
+
import usePagination from "./usePagination";
|
|
21
|
+
import usePrevious from "./usePrevious";
|
|
22
|
+
import useRenderCount from "./useRenderCount";
|
|
23
|
+
import useScript from "./useScript";
|
|
24
|
+
import useSize from "./useSize";
|
|
25
|
+
import useStateWithHistory from "./useStateWithHistory";
|
|
26
|
+
import useStateWithValidation from "./useStateWithValidation";
|
|
27
|
+
import { useLocalStorage, useSessionStorage } from "./useStorage";
|
|
28
|
+
import useTimeout from "./useTimeout";
|
|
29
|
+
import useToggle from "./useToggle";
|
|
30
|
+
import useUpdateEffect from "./useUpdateEffect";
|
|
31
|
+
import useWindowSize from "./useWindowSize";
|
|
32
|
+
export { useArray, useAsync, useClickOutside, useCookie, useCopyToClipboard, useDarkMode, useDebounce, useDebugInformation, useDeepCompareEffect, useEffectOnce, useEventListener, useFetch, useGenerateHtmlId, useGeolocation, useHover, useLongPress, useMediaQuery, useOnlineStatus, useOnScreen, usePagination, usePrevious, useRenderCount, useScript, useSize, useStateWithHistory, useStateWithValidation, useLocalStorage, useSessionStorage, useTimeout, useToggle, useUpdateEffect, useWindowSize, };
|
package/lib/esm/index.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import useArray from "./useArray";
|
|
2
|
+
import useAsync from "./useAsync";
|
|
3
|
+
import useClickOutside from "./useClickOutside";
|
|
4
|
+
import useCookie from "./useCookie";
|
|
5
|
+
import useCopyToClipboard from "./useCopyToClipboard";
|
|
6
|
+
import useDarkMode from "./useDarkMode";
|
|
7
|
+
import useDebounce from "./useDebounce";
|
|
8
|
+
import useDebugInformation from "./useDebugInformation";
|
|
9
|
+
import useDeepCompareEffect from "./useDeepCompareEffect";
|
|
10
|
+
import useEffectOnce from "./useEffectOnce";
|
|
11
|
+
import useEventListener from "./useEventListener";
|
|
12
|
+
import useFetch from "./useFetch";
|
|
13
|
+
import useGenerateHtmlId from "./useGenerateHtmlId";
|
|
14
|
+
import useGeolocation from "./useGeolocation";
|
|
15
|
+
import useHover from "./useHover";
|
|
16
|
+
import useLongPress from "./useLongPress";
|
|
17
|
+
import useMediaQuery from "./useMediaQuery";
|
|
18
|
+
import useOnlineStatus from "./useOnlineStatus";
|
|
19
|
+
import useOnScreen from "./useOnScreen";
|
|
20
|
+
import usePagination from "./usePagination";
|
|
21
|
+
import usePrevious from "./usePrevious";
|
|
22
|
+
import useRenderCount from "./useRenderCount";
|
|
23
|
+
import useScript from "./useScript";
|
|
24
|
+
import useSize from "./useSize";
|
|
25
|
+
import useStateWithHistory from "./useStateWithHistory";
|
|
26
|
+
import useStateWithValidation from "./useStateWithValidation";
|
|
27
|
+
import { useLocalStorage, useSessionStorage } from "./useStorage";
|
|
28
|
+
import useTimeout from "./useTimeout";
|
|
29
|
+
import useToggle from "./useToggle";
|
|
30
|
+
import useUpdateEffect from "./useUpdateEffect";
|
|
31
|
+
import useWindowSize from "./useWindowSize";
|
|
32
|
+
export { useArray, useAsync, useClickOutside, useCookie, useCopyToClipboard, useDarkMode, useDebounce, useDebugInformation, useDeepCompareEffect, useEffectOnce, useEventListener, useFetch, useGenerateHtmlId, useGeolocation, useHover, useLongPress, useMediaQuery, useOnlineStatus, useOnScreen, usePagination, usePrevious, useRenderCount, useScript, useSize, useStateWithHistory, useStateWithValidation, useLocalStorage, useSessionStorage, useTimeout, useToggle, useUpdateEffect, useWindowSize, };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
+
if (ar || !(i in from)) {
|
|
4
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
+
ar[i] = from[i];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
+
};
|
|
10
|
+
import { useState } from "react";
|
|
11
|
+
export default function useArray(defaultValue) {
|
|
12
|
+
var _a = useState(defaultValue), array = _a[0], setArray = _a[1];
|
|
13
|
+
var push = function (element) {
|
|
14
|
+
setArray(function (a) { return __spreadArray(__spreadArray([], a, true), [element], false); });
|
|
15
|
+
};
|
|
16
|
+
var filter = function (callback) {
|
|
17
|
+
setArray(function (a) { return a.filter(callback); });
|
|
18
|
+
};
|
|
19
|
+
var update = function (index, newElement) {
|
|
20
|
+
setArray(function (a) { return __spreadArray(__spreadArray(__spreadArray([], a.slice(0, index), true), [newElement], false), a.slice(index + 1), true); });
|
|
21
|
+
};
|
|
22
|
+
var remove = function (index) {
|
|
23
|
+
if (index > -1) {
|
|
24
|
+
array.splice(index, 1);
|
|
25
|
+
setArray(array);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var clear = function () {
|
|
29
|
+
setArray([]);
|
|
30
|
+
};
|
|
31
|
+
return {
|
|
32
|
+
array: array,
|
|
33
|
+
set: setArray,
|
|
34
|
+
push: push,
|
|
35
|
+
filter: filter,
|
|
36
|
+
update: update,
|
|
37
|
+
remove: remove,
|
|
38
|
+
clear: clear,
|
|
39
|
+
};
|
|
40
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
export default function useAsync(callback, dependencies) {
|
|
3
|
+
if (dependencies === void 0) { dependencies = []; }
|
|
4
|
+
var _a = useState(true), loading = _a[0], setLoading = _a[1];
|
|
5
|
+
var _b = useState(), error = _b[0], setError = _b[1];
|
|
6
|
+
var _c = useState(), value = _c[0], setValue = _c[1];
|
|
7
|
+
var callbackMemoized = useCallback(function () {
|
|
8
|
+
setLoading(true);
|
|
9
|
+
setError(undefined);
|
|
10
|
+
setValue(undefined);
|
|
11
|
+
callback()
|
|
12
|
+
.then(function (response) {
|
|
13
|
+
setValue(response);
|
|
14
|
+
})
|
|
15
|
+
.catch(setError)
|
|
16
|
+
.finally(function () { return setLoading(false); });
|
|
17
|
+
}, dependencies);
|
|
18
|
+
useEffect(function () {
|
|
19
|
+
callbackMemoized();
|
|
20
|
+
}, [callbackMemoized]);
|
|
21
|
+
return {
|
|
22
|
+
loading: loading,
|
|
23
|
+
error: error,
|
|
24
|
+
value: value,
|
|
25
|
+
};
|
|
26
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import useEventListener from "../useEventListener";
|
|
2
|
+
export default function useClickOutside(ref, cb) {
|
|
3
|
+
useEventListener("click", function (e) {
|
|
4
|
+
if (ref.current == null || (typeof ref.current !== "undefined" && ref.current.contains(e.target)))
|
|
5
|
+
return;
|
|
6
|
+
cb(e);
|
|
7
|
+
}, document);
|
|
8
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
import Cookies from "js-cookie";
|
|
3
|
+
export default function useCookie(name, defaultValue) {
|
|
4
|
+
var _a = useState(function () {
|
|
5
|
+
var cookie = Cookies.get(name);
|
|
6
|
+
if (cookie)
|
|
7
|
+
return cookie;
|
|
8
|
+
Cookies.set(name, defaultValue);
|
|
9
|
+
return defaultValue;
|
|
10
|
+
}), value = _a[0], setValue = _a[1];
|
|
11
|
+
var updateCookie = useCallback(function (newValue, options) {
|
|
12
|
+
Cookies.set(name, newValue, options);
|
|
13
|
+
setValue(newValue);
|
|
14
|
+
}, [name]);
|
|
15
|
+
var deleteCookie = useCallback(function () {
|
|
16
|
+
Cookies.remove(name);
|
|
17
|
+
setValue("");
|
|
18
|
+
}, [name]);
|
|
19
|
+
return [value, updateCookie, deleteCookie];
|
|
20
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import copy from "copy-to-clipboard";
|
|
3
|
+
export default function useCopyToClipboard() {
|
|
4
|
+
var _a = useState(), value = _a[0], setValue = _a[1];
|
|
5
|
+
var _b = useState(), success = _b[0], setSuccess = _b[1];
|
|
6
|
+
var copyToClipboard = function (text, options) {
|
|
7
|
+
if (options === void 0) { options = {}; }
|
|
8
|
+
var result = copy(text, options);
|
|
9
|
+
if (result)
|
|
10
|
+
setValue(text);
|
|
11
|
+
setSuccess(result);
|
|
12
|
+
};
|
|
13
|
+
return [copyToClipboard, { value: value, success: success }];
|
|
14
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import useMediaQuery from "../useMediaQuery";
|
|
3
|
+
import { useLocalStorage } from "../useStorage";
|
|
4
|
+
export default function useDarkMode() {
|
|
5
|
+
var _a = useLocalStorage("useDarkMode"), darkMode = _a[0], setDarkMode = _a[1];
|
|
6
|
+
var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
|
7
|
+
var enabled = darkMode !== null && darkMode !== void 0 ? darkMode : prefersDarkMode;
|
|
8
|
+
useEffect(function () {
|
|
9
|
+
document.body.classList.toggle("dark-mode", enabled);
|
|
10
|
+
}, [enabled]);
|
|
11
|
+
return [enabled, setDarkMode];
|
|
12
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
+
if (ar || !(i in from)) {
|
|
4
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
+
ar[i] = from[i];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
+
};
|
|
10
|
+
import { useEffect } from "react";
|
|
11
|
+
import useTimeout from "../useTimeout";
|
|
12
|
+
export default function useDebounce(callback, delay, dependencies) {
|
|
13
|
+
var _a = useTimeout(callback, delay), reset = _a.reset, clear = _a.clear;
|
|
14
|
+
useEffect(reset, __spreadArray(__spreadArray([], dependencies, true), [reset], false));
|
|
15
|
+
useEffect(clear, [clear]);
|
|
16
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface DebugInformation {
|
|
2
|
+
count: number;
|
|
3
|
+
changedProps: Record<string, unknown>;
|
|
4
|
+
timeSinceLastRender: number;
|
|
5
|
+
lastRenderTimestamp: number;
|
|
6
|
+
}
|
|
7
|
+
export default function useDebugInformation(componentName: string, props: Record<string, unknown>): DebugInformation;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { useEffect, useRef } from "react";
|
|
13
|
+
import useRenderCount from "../useRenderCount";
|
|
14
|
+
export default function useDebugInformation(componentName, props) {
|
|
15
|
+
var count = useRenderCount();
|
|
16
|
+
var changedProps = useRef({});
|
|
17
|
+
var previousProps = useRef(props);
|
|
18
|
+
var lastRenderTimestamp = useRef(Date.now());
|
|
19
|
+
var propKeys = Object.keys(__assign(__assign({}, props), previousProps));
|
|
20
|
+
changedProps.current = propKeys.reduce(function (obj, key) {
|
|
21
|
+
var _a;
|
|
22
|
+
if (props[key] === previousProps.current[key])
|
|
23
|
+
return obj;
|
|
24
|
+
return __assign(__assign({}, obj), (_a = {}, _a[key] = { previous: previousProps.current[key], current: props[key] }, _a));
|
|
25
|
+
}, {});
|
|
26
|
+
var info = {
|
|
27
|
+
count: count,
|
|
28
|
+
changedProps: changedProps.current,
|
|
29
|
+
timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
|
|
30
|
+
lastRenderTimestamp: lastRenderTimestamp.current,
|
|
31
|
+
};
|
|
32
|
+
useEffect(function () {
|
|
33
|
+
previousProps.current = props;
|
|
34
|
+
lastRenderTimestamp.current = Date.now();
|
|
35
|
+
console.log("[debug-info]", componentName, info);
|
|
36
|
+
});
|
|
37
|
+
return info;
|
|
38
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
import isEqual from "lodash/fp/isEqual";
|
|
3
|
+
export default function useDeepCompareEffect(callback, dependencies) {
|
|
4
|
+
if (dependencies === void 0) { dependencies = []; }
|
|
5
|
+
var currentDependenciesRef = useRef([]);
|
|
6
|
+
if (!isEqual(currentDependenciesRef.current, dependencies)) {
|
|
7
|
+
currentDependenciesRef.current = dependencies;
|
|
8
|
+
}
|
|
9
|
+
useEffect(callback, [currentDependenciesRef.current]);
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useEffectOnce(callback: () => void): void;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
export default function useEventListener(eventType, callback, element) {
|
|
3
|
+
if (element === void 0) { element = window; }
|
|
4
|
+
var callbackRef = useRef(callback);
|
|
5
|
+
useEffect(function () {
|
|
6
|
+
callbackRef.current = callback;
|
|
7
|
+
}, [callback]);
|
|
8
|
+
useEffect(function () {
|
|
9
|
+
if (element == null)
|
|
10
|
+
return;
|
|
11
|
+
var handler = function (e) { return callbackRef.current(e); };
|
|
12
|
+
element.addEventListener(eventType, handler);
|
|
13
|
+
return function () { return element.removeEventListener(eventType, handler); };
|
|
14
|
+
}, [eventType, element]);
|
|
15
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (_) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import useAsync from "../useAsync";
|
|
49
|
+
var DEFAULT_OPTIONS = {
|
|
50
|
+
headers: { "Content-Type": "application/json" },
|
|
51
|
+
};
|
|
52
|
+
export default function useFetch(url, options, dependencies) {
|
|
53
|
+
var _this = this;
|
|
54
|
+
if (options === void 0) { options = {}; }
|
|
55
|
+
if (dependencies === void 0) { dependencies = []; }
|
|
56
|
+
return useAsync(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
57
|
+
var _this = this;
|
|
58
|
+
return __generator(this, function (_a) {
|
|
59
|
+
return [2 /*return*/, fetch(url, __assign(__assign({}, DEFAULT_OPTIONS), options)).then(function (res) { return __awaiter(_this, void 0, void 0, function () {
|
|
60
|
+
var json;
|
|
61
|
+
return __generator(this, function (_a) {
|
|
62
|
+
switch (_a.label) {
|
|
63
|
+
case 0:
|
|
64
|
+
if (res.ok)
|
|
65
|
+
return [2 /*return*/, res.json()];
|
|
66
|
+
return [4 /*yield*/, res.json()];
|
|
67
|
+
case 1:
|
|
68
|
+
json = _a.sent();
|
|
69
|
+
return [4 /*yield*/, Promise.reject(json)];
|
|
70
|
+
case 2: return [2 /*return*/, _a.sent()];
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}); })];
|
|
74
|
+
});
|
|
75
|
+
}); }, dependencies);
|
|
76
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
export default function useGeolocation(options) {
|
|
3
|
+
if (options === void 0) { options = undefined; }
|
|
4
|
+
var _a = useState(true), loading = _a[0], setLoading = _a[1];
|
|
5
|
+
var _b = useState(), error = _b[0], setError = _b[1];
|
|
6
|
+
var _c = useState({}), data = _c[0], setData = _c[1];
|
|
7
|
+
useEffect(function () {
|
|
8
|
+
var successHandler = function (geoLocation) {
|
|
9
|
+
console.log("s", geoLocation);
|
|
10
|
+
setLoading(false);
|
|
11
|
+
setError(null);
|
|
12
|
+
setData(geoLocation.coords);
|
|
13
|
+
};
|
|
14
|
+
var errorHandler = function (geoLocation) {
|
|
15
|
+
setError(geoLocation);
|
|
16
|
+
setLoading(false);
|
|
17
|
+
};
|
|
18
|
+
navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);
|
|
19
|
+
var id = navigator.geolocation.watchPosition(successHandler, errorHandler, options);
|
|
20
|
+
return function () { return navigator.geolocation.clearWatch(id); };
|
|
21
|
+
}, [options]);
|
|
22
|
+
return { loading: loading, error: error, data: data };
|
|
23
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import useEventListener from "../useEventListener";
|
|
3
|
+
export default function useHover(ref) {
|
|
4
|
+
var _a = useState(false), hovered = _a[0], setHovered = _a[1];
|
|
5
|
+
useEffect(function () {
|
|
6
|
+
setHovered(false);
|
|
7
|
+
}, [ref.current]);
|
|
8
|
+
useEventListener("mouseover", function () { return setHovered(true); }, ref.current);
|
|
9
|
+
useEventListener("mouseout", function () { return setHovered(false); }, ref.current);
|
|
10
|
+
return hovered;
|
|
11
|
+
}
|