@grantpearceuk/hooks 0.1.0

package/README.md

@@ -0,0 +1,403 @@
+# Custom React Hooks
+
+View hooks in action (Examples)
+
+## useToggle
+
+Easily toggle between a boolean
+
+```tsx
+
+const [value, toggleValue] = useToggle(false)
+
+<Button onClick={() => toggleValue()}>
+    Toggle
+</Button>
+<Button onClick={() => toggleValue(true)}>
+    Make True
+</Button>
+<Button onClick={() => toggleValue(false)}>
+    Make False
+</Button>
+
+```
+
+---
+
+## useTimeout
+
+Run a timeout without re-rendering issues.  Useful for use in other hooks
+
+```tsx
+
+const [count, setCount] = useState(10)
+const { clear, reset } = useTimeout(() => setCount(0), 1000)
+
+<Button onClick={() => setCount((c) => c + 1)}>
+    Increment
+</Button>
+<Button onClick={clear}>
+    Clear Timeout
+</Button>
+<Button onClick={reset}>
+    Reset Timeout
+</Button>
+
+```
+
+---
+
+## useDebounce
+
+Run something after a certain delay.  Does not run on the first time
+
+```tsx
+
+const [count, setCount] = useState(10)
+useDebounce(() => alert(count), 1000, [count])
+
+<Button onClick={() => setCount((c) => c + 1)}>
+    Increment
+</Button>
+```
+
+---
+
+## useUpdateEffect
+
+Only run when something changes.  Does not run on the first time
+
+```tsx
+
+const [count, setCount] = useState(10)
+useUpdateEffect(() => alert(count), [count])
+
+<Button onClick={() => setCount((c) => c + 1)}>
+    Increment
+</Button>
+
+```
+
+---
+
+## useArray
+
+Easily use arrays.
+
+```tsx
+
+const { array, set, push, remove, filter, update, clear } = useArray([1, 2, 3, 4, 5, 6])
+
+<Button onClick={() => push(7)}>
+    Add 7
+</Button>
+<Button onClick={() => update(1, 9)}>
+    Change 2nd To 9
+</Button>
+<Button onClick={() => remove(1)}>
+    Remove 2nd
+</Button>
+<Button onClick={() => filter((n) => n < 3)}>
+    Keep below 4
+</Button>
+<Button onClick={() => set([1, 2])}>
+    Set To 1, 2
+</Button>
+<Button onClick={clear}>
+    Clear
+</Button>
+
+```
+
+---
+
+## usePrevious
+
+Store previous value of a state
+
+```tsx
+
+const [count, setCount] = useState(0)
+const [name, setName] = useState("Grant")
+const previousCount = usePrevious(count)
+
+<Button onClick={() => setCount((currentCount) => currentCount + 1)}>
+    Increment
+</Button>
+<Button onClick={() => setName("John")}>
+    Change Name
+</Button>
+
+```
+
+---
+
+## useStateWithHistory
+
+Stores the history of a state
+
+```tsx
+
+const [count, setCount, { history, pointer, back, forward, go }] = useStateWithHistory(1)
+const [name, setName] = useState("Grant")
+
+<Button onClick={() => setCount((currentCount) => currentCount * 2)}>
+    Double
+</Button>
+<Button onClick={() => setCount((currentCount) => currentCount + 1)}>
+    Increment
+</Button>
+<Button onClick={back}>
+    Back
+</Button>
+<Button onClick={forward}>
+    Forward
+</Button>
+<Button onClick={() => go(2)}>
+    Go To Index 2
+</Button>
+<Button onClick={() => setName("John")}>
+    Change Name
+</Button>
+
+
+```
+
+---
+
+## useStorage
+
+Easily use Local or Session Storage
+
+```tsx
+
+const [name, setName, removeName] = useSessionStorage("name", "Grant")
+const [age, setAge, removeAge] = useLocalStorage("age", 26)
+
+<Button onClick={() => setName("John")}>
+    Set Name
+</Button>
+<Button onClick={() => setAge(40)}>
+    Set Age
+</Button>
+<Button onClick={removeName}>
+    Remove Name
+</Button>
+<Button onClick={removeAge}>
+    Remove Age
+</Button>
+
+```
+
+---
+
+## useAsync
+
+Easily call an asynchronous function
+
+```tsx
+
+const { loading, error, value } = useAsync(() => {
+        return new Promise((resolve, reject) => {
+            const success = true
+            setTimeout(() => {
+                success ? resolve("Hi") : reject("Error")
+            }, 1000)
+        })
+    })
+
+```
+
+---
+
+## useFetch
+
+Easily call and handle a fetch request
+
+```tsx
+
+const [id, setId] = useState(1)
+const { loading, error, value } = useFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {}, [id])
+
+Error: {JSON.stringify(error, null, 2)}
+Results: {JSON.stringify(value, null, 2)}
+
+<Button onClick={() => setId((currentId) => currentId + 1)}>
+    Increment ID
+<Button>
+
+
+
+```
+
+---
+
+## useClickOutside
+
+Run a function when a click is outside the element
+
+```tsx
+
+const [open, setOpen] = useState(false)
+const modalRef = useRef()
+
+useClickOutside(modalRef, () => {
+    if (open) setOpen(false)
+})
+<div ref={modalRef} />
+
+```
+
+---
+
+## useCookie
+
+Easily use cookies
+
+```tsx
+
+const [value, update, remove] = useCookie("name", "John")
+
+```
+
+---
+
+## useCopyToClipboard
+
+Copy to the clipboard
+
+```tsx
+
+const [copyToClipboard, { success }] = useCopyToClipboard()
+
+```
+
+---
+
+## useDarkMode
+
+Find if the Dark mode is set.  Sets in local storage
+
+```tsx
+
+const [darkMode, setDarkMode] = useDarkMode()
+
+```
+
+---
+
+## useDeepCompareEffect
+
+Compare values within an object
+
+---
+
+## useEffectOnce
+
+Only run once
+
+```tsx
+
+useEffectOnce(() => alert("Use Effect Once"))
+
+```
+
+---
+
+## useEventListener
+
+Listen for events
+
+```tsx
+
+const [key, setKey] = useState("")
+useEventListener("keydown", (e: KeyboardEvent) => {
+    setKey(e.key)
+})
+
+```
+
+---
+
+## useGeolocation
+
+Get the Geolocation Data
+
+```tsx
+
+const { loading, error, data: { latitude, longitude } } = useGeolocation()
+
+```
+
+---
+
+## useMediaQuery
+
+Check what media query is valid
+
+```tsx
+
+const isLarge = useMediaQuery("(min-width: 200px)")
+
+```
+---
+
+## useOnScreen
+
+Check if an element if on the screen
+
+```tsx
+
+const secondRef = useRef()
+const visible = useOnScreen(secondRef, "-100px")
+
+<div ref={secondRef} />
+
+```
+
+---
+
+## useScript
+
+Easily load a script asynchronous
+
+```tsx
+
+const { loading, error } = useScript("https://code.jquery.com/jquery-3.6.0.min.js")
+
+```
+
+---
+
+## useSize
+
+Find the size dynamically
+
+---
+
+## useStateWithValidation
+
+Easily validate a state
+
+```tsx
+
+ const ref = useRef()
+const size = useSize(ref)
+
+<textarea ref={ref}></textarea>
+
+```
+
+---
+
+## useWindowSize
+
+Check the size of the window
+
+```tsx
+
+const { width, height } = useWindowSize()
+
+```
+
+---

package/lib/cjs/global.d.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    var $: any;
+    interface Window {
+        clipboardData?: any;
+    }
+}
+export {};

package/lib/cjs/global.d.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/index.d.ts

@@ -0,0 +1,32 @@
+import useArray from "./useArray";
+import useAsync from "./useAsync";
+import useClickOutside from "./useClickOutside";
+import useCookie from "./useCookie";
+import useCopyToClipboard from "./useCopyToClipboard";
+import useDarkMode from "./useDarkMode";
+import useDebounce from "./useDebounce";
+import useDebugInformation from "./useDebugInformation";
+import useDeepCompareEffect from "./useDeepCompareEffect";
+import useEffectOnce from "./useEffectOnce";
+import useEventListener from "./useEventListener";
+import useFetch from "./useFetch";
+import useGenerateHtmlId from "./useGenerateHtmlId";
+import useGeolocation from "./useGeolocation";
+import useHover from "./useHover";
+import useLongPress from "./useLongPress";
+import useMediaQuery from "./useMediaQuery";
+import useOnlineStatus from "./useOnlineStatus";
+import useOnScreen from "./useOnScreen";
+import usePagination from "./usePagination";
+import usePrevious from "./usePrevious";
+import useRenderCount from "./useRenderCount";
+import useScript from "./useScript";
+import useSize from "./useSize";
+import useStateWithHistory from "./useStateWithHistory";
+import useStateWithValidation from "./useStateWithValidation";
+import { useLocalStorage, useSessionStorage } from "./useStorage";
+import useTimeout from "./useTimeout";
+import useToggle from "./useToggle";
+import useUpdateEffect from "./useUpdateEffect";
+import useWindowSize from "./useWindowSize";
+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/cjs/index.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowSize = exports.useUpdateEffect = exports.useToggle = exports.useTimeout = exports.useSessionStorage = exports.useLocalStorage = exports.useStateWithValidation = exports.useStateWithHistory = exports.useSize = exports.useScript = exports.useRenderCount = exports.usePrevious = exports.usePagination = exports.useOnScreen = exports.useOnlineStatus = exports.useMediaQuery = exports.useLongPress = exports.useHover = exports.useGeolocation = exports.useGenerateHtmlId = exports.useFetch = exports.useEventListener = exports.useEffectOnce = exports.useDeepCompareEffect = exports.useDebugInformation = exports.useDebounce = exports.useDarkMode = exports.useCopyToClipboard = exports.useCookie = exports.useClickOutside = exports.useAsync = exports.useArray = void 0;
+var useArray_1 = __importDefault(require("./useArray"));
+exports.useArray = useArray_1.default;
+var useAsync_1 = __importDefault(require("./useAsync"));
+exports.useAsync = useAsync_1.default;
+var useClickOutside_1 = __importDefault(require("./useClickOutside"));
+exports.useClickOutside = useClickOutside_1.default;
+var useCookie_1 = __importDefault(require("./useCookie"));
+exports.useCookie = useCookie_1.default;
+var useCopyToClipboard_1 = __importDefault(require("./useCopyToClipboard"));
+exports.useCopyToClipboard = useCopyToClipboard_1.default;
+var useDarkMode_1 = __importDefault(require("./useDarkMode"));
+exports.useDarkMode = useDarkMode_1.default;
+var useDebounce_1 = __importDefault(require("./useDebounce"));
+exports.useDebounce = useDebounce_1.default;
+var useDebugInformation_1 = __importDefault(require("./useDebugInformation"));
+exports.useDebugInformation = useDebugInformation_1.default;
+var useDeepCompareEffect_1 = __importDefault(require("./useDeepCompareEffect"));
+exports.useDeepCompareEffect = useDeepCompareEffect_1.default;
+var useEffectOnce_1 = __importDefault(require("./useEffectOnce"));
+exports.useEffectOnce = useEffectOnce_1.default;
+var useEventListener_1 = __importDefault(require("./useEventListener"));
+exports.useEventListener = useEventListener_1.default;
+var useFetch_1 = __importDefault(require("./useFetch"));
+exports.useFetch = useFetch_1.default;
+var useGenerateHtmlId_1 = __importDefault(require("./useGenerateHtmlId"));
+exports.useGenerateHtmlId = useGenerateHtmlId_1.default;
+var useGeolocation_1 = __importDefault(require("./useGeolocation"));
+exports.useGeolocation = useGeolocation_1.default;
+var useHover_1 = __importDefault(require("./useHover"));
+exports.useHover = useHover_1.default;
+var useLongPress_1 = __importDefault(require("./useLongPress"));
+exports.useLongPress = useLongPress_1.default;
+var useMediaQuery_1 = __importDefault(require("./useMediaQuery"));
+exports.useMediaQuery = useMediaQuery_1.default;
+var useOnlineStatus_1 = __importDefault(require("./useOnlineStatus"));
+exports.useOnlineStatus = useOnlineStatus_1.default;
+var useOnScreen_1 = __importDefault(require("./useOnScreen"));
+exports.useOnScreen = useOnScreen_1.default;
+var usePagination_1 = __importDefault(require("./usePagination"));
+exports.usePagination = usePagination_1.default;
+var usePrevious_1 = __importDefault(require("./usePrevious"));
+exports.usePrevious = usePrevious_1.default;
+var useRenderCount_1 = __importDefault(require("./useRenderCount"));
+exports.useRenderCount = useRenderCount_1.default;
+var useScript_1 = __importDefault(require("./useScript"));
+exports.useScript = useScript_1.default;
+var useSize_1 = __importDefault(require("./useSize"));
+exports.useSize = useSize_1.default;
+var useStateWithHistory_1 = __importDefault(require("./useStateWithHistory"));
+exports.useStateWithHistory = useStateWithHistory_1.default;
+var useStateWithValidation_1 = __importDefault(require("./useStateWithValidation"));
+exports.useStateWithValidation = useStateWithValidation_1.default;
+var useStorage_1 = require("./useStorage");
+Object.defineProperty(exports, "useLocalStorage", { enumerable: true, get: function () { return useStorage_1.useLocalStorage; } });
+Object.defineProperty(exports, "useSessionStorage", { enumerable: true, get: function () { return useStorage_1.useSessionStorage; } });
+var useTimeout_1 = __importDefault(require("./useTimeout"));
+exports.useTimeout = useTimeout_1.default;
+var useToggle_1 = __importDefault(require("./useToggle"));
+exports.useToggle = useToggle_1.default;
+var useUpdateEffect_1 = __importDefault(require("./useUpdateEffect"));
+exports.useUpdateEffect = useUpdateEffect_1.default;
+var useWindowSize_1 = __importDefault(require("./useWindowSize"));
+exports.useWindowSize = useWindowSize_1.default;

package/lib/cjs/useArray/index.d.ts

@@ -0,0 +1,2 @@
+import { ArrayResponse, Items } from "./types";
+export default function useArray(defaultValue: [...Items]): ArrayResponse;

package/lib/cjs/useArray/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useArray(defaultValue) {
+    var _a = (0, react_1.useState)(defaultValue), array = _a[0], setArray = _a[1];
+    var push = function (element) {
+        setArray(function (a) { return __spreadArray(__spreadArray([], a, true), [element], false); });
+    };
+    var filter = function (callback) {
+        setArray(function (a) { return a.filter(callback); });
+    };
+    var update = function (index, newElement) {
+        setArray(function (a) { return __spreadArray(__spreadArray(__spreadArray([], a.slice(0, index), true), [newElement], false), a.slice(index + 1), true); });
+    };
+    var remove = function (index) {
+        if (index > -1) {
+            array.splice(index, 1);
+            setArray(array);
+        }
+    };
+    var clear = function () {
+        setArray([]);
+    };
+    return {
+        array: array,
+        set: setArray,
+        push: push,
+        filter: filter,
+        update: update,
+        remove: remove,
+        clear: clear,
+    };
+}
+exports.default = useArray;

package/lib/cjs/useAsync/index.d.ts

@@ -0,0 +1,2 @@
+import { AsyncResponse, Callback } from "./types";
+export default function useAsync(callback: Callback, dependencies?: never[]): AsyncResponse;

package/lib/cjs/useAsync/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useAsync(callback, dependencies) {
+    if (dependencies === void 0) { dependencies = []; }
+    var _a = (0, react_1.useState)(true), loading = _a[0], setLoading = _a[1];
+    var _b = (0, react_1.useState)(), error = _b[0], setError = _b[1];
+    var _c = (0, react_1.useState)(), value = _c[0], setValue = _c[1];
+    var callbackMemoized = (0, react_1.useCallback)(function () {
+        setLoading(true);
+        setError(undefined);
+        setValue(undefined);
+        callback()
+            .then(function (response) {
+            setValue(response);
+        })
+            .catch(setError)
+            .finally(function () { return setLoading(false); });
+    }, dependencies);
+    (0, react_1.useEffect)(function () {
+        callbackMemoized();
+    }, [callbackMemoized]);
+    return {
+        loading: loading,
+        error: error,
+        value: value,
+    };
+}
+exports.default = useAsync;

package/lib/cjs/useClickOutside/index.d.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject } from "react";
+export default function useClickOutside(ref: MutableRefObject<undefined | HTMLElement>, cb: {
+    (): void;
+    (arg0: UIEvent | Event): void;
+}): void;

package/lib/cjs/useClickOutside/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var useEventListener_1 = __importDefault(require("../useEventListener"));
+function useClickOutside(ref, cb) {
+    (0, useEventListener_1.default)("click", function (e) {
+        if (ref.current == null || (typeof ref.current !== "undefined" && ref.current.contains(e.target)))
+            return;
+        cb(e);
+    }, document);
+}
+exports.default = useClickOutside;

package/lib/cjs/useCookie/index.d.ts

@@ -0,0 +1,2 @@
+import { CookieResponse, CookieValue } from "./types";
+export default function useCookie(name: string, defaultValue: CookieValue): CookieResponse;

package/lib/cjs/useCookie/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var js_cookie_1 = __importDefault(require("js-cookie"));
+function useCookie(name, defaultValue) {
+    var _a = (0, react_1.useState)(function () {
+        var cookie = js_cookie_1.default.get(name);
+        if (cookie)
+            return cookie;
+        js_cookie_1.default.set(name, defaultValue);
+        return defaultValue;
+    }), value = _a[0], setValue = _a[1];
+    var updateCookie = (0, react_1.useCallback)(function (newValue, options) {
+        js_cookie_1.default.set(name, newValue, options);
+        setValue(newValue);
+    }, [name]);
+    var deleteCookie = (0, react_1.useCallback)(function () {
+        js_cookie_1.default.remove(name);
+        setValue("");
+    }, [name]);
+    return [value, updateCookie, deleteCookie];
+}
+exports.default = useCookie;

package/lib/cjs/useCopyToClipboard/index.d.ts

@@ -0,0 +1,2 @@
+import { ClipboardResponse } from "./types";
+export default function useCopyToClipboard(): ClipboardResponse;

package/lib/cjs/useCopyToClipboard/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+function useCopyToClipboard() {
+    var _a = (0, react_1.useState)(), value = _a[0], setValue = _a[1];
+    var _b = (0, react_1.useState)(), success = _b[0], setSuccess = _b[1];
+    var copyToClipboard = function (text, options) {
+        if (options === void 0) { options = {}; }
+        var result = (0, copy_to_clipboard_1.default)(text, options);
+        if (result)
+            setValue(text);
+        setSuccess(result);
+    };
+    return [copyToClipboard, { value: value, success: success }];
+}
+exports.default = useCopyToClipboard;

package/lib/cjs/useDarkMode/index.d.ts

@@ -0,0 +1,4 @@
+import { Dispatch } from "react";
+declare type DarkMode = [enabled: boolean, setDarkMode: Dispatch<unknown>];
+export default function useDarkMode(): DarkMode;
+export {};