@grantpearceuk/hooks 0.1.0

package/lib/esm/useLongPress/index.js

@@ -0,0 +1,13 @@
+import useEffectOnce from "../useEffectOnce";
+import useEventListener from "../useEventListener";
+import useTimeout from "../useTimeout";
+export default function useLongPress(ref, cb, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.delay, delay = _c === void 0 ? 250 : _c;
+    var _d = useTimeout(cb, delay), reset = _d.reset, clear = _d.clear;
+    useEffectOnce(clear);
+    useEventListener("mousedown", reset, ref.current);
+    useEventListener("touchstart", reset, ref.current);
+    useEventListener("mouseup", clear, ref.current);
+    useEventListener("mouseleave", clear, ref.current);
+    useEventListener("touchend", clear, ref.current);
+}

package/lib/esm/useMediaQuery/index.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(mediaQuery: string): boolean;

package/lib/esm/useMediaQuery/index.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+import useEventListener from "../useEventListener";
+export default function useMediaQuery(mediaQuery) {
+    var _a = useState(false), isMatch = _a[0], setIsMatch = _a[1];
+    var _b = useState(undefined), mediaQueryList = _b[0], setMediaQueryList = _b[1];
+    useEffect(function () {
+        var list = window.matchMedia(mediaQuery);
+        setMediaQueryList(list);
+        setIsMatch(list.matches);
+    }, [mediaQuery]);
+    useEventListener("change", function (event) {
+        var e = event;
+        setIsMatch(e.matches);
+    }, mediaQueryList);
+    return isMatch;
+}

package/lib/esm/useOnScreen/index.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from "react";
+export default function useOnScreen(ref: MutableRefObject<undefined>, rootMargin?: string): boolean;

package/lib/esm/useOnScreen/index.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+export default function useOnScreen(ref, rootMargin) {
+    if (rootMargin === void 0) { rootMargin = "0px"; }
+    var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
+    useEffect(function () {
+        if (ref.current == null)
+            return;
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            return setIsVisible(entry.isIntersecting);
+        }, { rootMargin: rootMargin });
+        observer.observe(ref.current);
+        return function () {
+            if (ref.current == null)
+                return;
+            observer.unobserve(ref.current);
+        };
+    }, [ref.current, rootMargin]);
+    return isVisible;
+}

package/lib/esm/useOnlineStatus/index.d.ts

@@ -0,0 +1 @@
+export default function useOnlineStatus(): boolean;

package/lib/esm/useOnlineStatus/index.js

@@ -0,0 +1,8 @@
+import { useState } from "react";
+import useEventListener from "../useEventListener";
+export default function useOnlineStatus() {
+    var _a = useState(navigator.onLine), online = _a[0], setOnline = _a[1];
+    useEventListener("online", function () { return setOnline(navigator.onLine); });
+    useEventListener("offline", function () { return setOnline(navigator.onLine); });
+    return online;
+}

package/lib/esm/usePagination/index.d.ts

@@ -0,0 +1,9 @@
+interface PaginationResponse {
+    data: Record<string, unknown>[];
+    totalPages: number;
+    currentPage: number;
+    nextPage: () => void;
+    previousPage: () => void;
+}
+export default function usePagination(data: Record<string, unknown>[], pageSize: number): PaginationResponse;
+export {};

package/lib/esm/usePagination/index.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+export default function usePagination(data, pageSize) {
+    var _a = useState(0), pageIndex = _a[0], setPageIndex = _a[1];
+    var totalPages = Math.ceil(data.length / pageSize);
+    var filteredData = data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+    var nextPage = function () {
+        setPageIndex(Math.min(pageIndex + 1, totalPages - 1));
+    };
+    var previousPage = function () {
+        setPageIndex(Math.max(pageIndex - 1, 0));
+    };
+    return {
+        data: filteredData,
+        currentPage: pageIndex + 1,
+        totalPages: totalPages,
+        nextPage: nextPage,
+        previousPage: previousPage,
+    };
+}

package/lib/esm/usePrevious/index.d.ts

@@ -0,0 +1,2 @@
+import { PreviousValue } from "./types";
+export default function usePrevious(value: PreviousValue): PreviousValue | undefined;

package/lib/esm/usePrevious/index.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+export default function usePrevious(value) {
+    var currentRef = useRef(value);
+    var previousRef = useRef();
+    if (currentRef.current !== value) {
+        previousRef.current = currentRef.current;
+        currentRef.current = value;
+    }
+    return previousRef.current;
+}

package/lib/esm/useRenderCount/index.d.ts

@@ -0,0 +1 @@
+export default function useRenderCount(): number;

package/lib/esm/useRenderCount/index.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export default function useRenderCount() {
+    var count = useRef(1);
+    useEffect(function () {
+        count.current = count.current + 1;
+    });
+    return count.current;
+}

package/lib/esm/useScript/index.d.ts

@@ -0,0 +1,2 @@
+import { ScriptInterface } from "./types";
+export default function useScript(url: string): ScriptInterface;

package/lib/esm/useScript/index.js

@@ -0,0 +1,13 @@
+import useAsync from "../useAsync";
+export default function useScript(url) {
+    return useAsync(function () {
+        var script = document.createElement("script");
+        script.src = url;
+        script.async = true;
+        return new Promise(function (resolve, reject) {
+            script.addEventListener("load", resolve);
+            script.addEventListener("error", reject);
+            document.body.appendChild(script);
+        });
+    }, [url]);
+}

package/lib/esm/useSize/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from "react";
+import { SizeObject } from "./types";
+export default function useSize(ref: MutableRefObject<undefined>): SizeObject;

package/lib/esm/useSize/index.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+export default function useSize(ref) {
+    var _a = useState({}), size = _a[0], setSize = _a[1];
+    useEffect(function () {
+        if (ref.current == null)
+            return;
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            return setSize(entry.contentRect);
+        });
+        observer.observe(ref.current);
+        return function () { return observer.disconnect(); };
+    }, []);
+    return size;
+}

package/lib/esm/useStateWithHistory/index.d.ts

@@ -0,0 +1,4 @@
+import { HistoryObject } from "./types";
+export default function useStateWithHistory(defaultValue: number, { capacity }?: {
+    capacity?: number | undefined;
+}): HistoryObject;

package/lib/esm/useStateWithHistory/index.js

@@ -0,0 +1,50 @@
+import { useCallback, useRef, useState } from "react";
+export default function useStateWithHistory(defaultValue, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.capacity, capacity = _c === void 0 ? 10 : _c;
+    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
+    var historyRef = useRef([value]);
+    var pointerRef = useRef(0);
+    var set = useCallback(function (item) {
+        var resolvedValue = typeof item === "function" ? item(value) : item;
+        if (historyRef.current[pointerRef.current] !== resolvedValue) {
+            if (pointerRef.current < historyRef.current.length - 1) {
+                historyRef.current.splice(pointerRef.current + 1);
+            }
+            historyRef.current.push(resolvedValue);
+            while (historyRef.current.length > capacity) {
+                historyRef.current.shift();
+            }
+            pointerRef.current = historyRef.current.length - 1;
+        }
+        setValue(resolvedValue);
+    }, [capacity, value]);
+    var back = useCallback(function () {
+        if (pointerRef.current <= 0)
+            return;
+        pointerRef.current--;
+        setValue(historyRef.current[pointerRef.current]);
+    }, []);
+    var forward = useCallback(function () {
+        if (pointerRef.current >= historyRef.current.length - 1)
+            return;
+        pointerRef.current++;
+        setValue(historyRef.current[pointerRef.current]);
+    }, []);
+    var go = useCallback(function (index) {
+        if (index < 0 || index >= historyRef.current.length - 1)
+            return;
+        pointerRef.current = index;
+        setValue(historyRef.current[pointerRef.current]);
+    }, []);
+    return [
+        value,
+        set,
+        {
+            history: historyRef.current,
+            pointer: pointerRef.current,
+            back: back,
+            forward: forward,
+            go: go,
+        },
+    ];
+}

package/lib/esm/useStateWithValidation/index.d.ts

@@ -0,0 +1,2 @@
+import { StateValidation, ValidationFunc, Value } from "./types";
+export default function useStateWithValidation(validationFunc: ValidationFunc, initialValue: Value): StateValidation;

package/lib/esm/useStateWithValidation/index.js

@@ -0,0 +1,11 @@
+import { useState, useCallback } from "react";
+export default function useStateWithValidation(validationFunc, initialValue) {
+    var _a = useState(initialValue), state = _a[0], setState = _a[1];
+    var _b = useState(function () { return validationFunc(state); }), isValid = _b[0], setIsValid = _b[1];
+    var onChange = useCallback(function (nextState) {
+        var value = typeof nextState === "function" ? nextState(state) : nextState;
+        setState(value);
+        setIsValid(validationFunc(value));
+    }, [validationFunc]);
+    return [state, onChange, isValid];
+}

package/lib/esm/useStorage/index.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch } from "react";
+declare type StorageObject = [value: any, setValue: Dispatch<unknown>, remove: () => void];
+export declare function useLocalStorage(key: string, defaultValue?: any): StorageObject;
+export declare function useSessionStorage(key: string, defaultValue?: any): StorageObject;
+export {};

package/lib/esm/useStorage/index.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useState, useEffect } from "react";
+var FUNCTION = "function";
+export function useLocalStorage(key, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = ""; }
+    return useStorage(key, defaultValue, window.localStorage);
+}
+export function useSessionStorage(key, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = ""; }
+    return useStorage(key, defaultValue, window.sessionStorage);
+}
+function useStorage(key, defaultValue, storageObject) {
+    var _a = useState(function () {
+        var jsonValue = storageObject.getItem(key);
+        if (jsonValue != null)
+            return JSON.parse(jsonValue);
+        return typeof defaultValue === FUNCTION ? defaultValue() : defaultValue;
+    }), value = _a[0], setValue = _a[1];
+    useEffect(function () {
+        if (value === undefined)
+            return storageObject.removeItem(key);
+        storageObject.setItem(key, JSON.stringify(value));
+    }, [key, value, storageObject]);
+    var remove = useCallback(function () {
+        setValue(undefined);
+    }, []);
+    return [value, setValue, remove];
+}

package/lib/esm/useTimeout/index.d.ts

@@ -0,0 +1,2 @@
+import { Callback, TimeoutInterface } from "./types";
+export default function useTimeout(callback: Callback, delay: number): TimeoutInterface;

package/lib/esm/useTimeout/index.js

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useRef } from "react";
+export default function useTimeout(callback, delay) {
+    var callbackRef = useRef(callback);
+    var timeoutRef = useRef(null);
+    useEffect(function () {
+        callbackRef.current = callback;
+    }, [callback]);
+    var set = useCallback(function () {
+        timeoutRef.current = setTimeout(function () { return callbackRef.current(); }, delay);
+    }, [delay]);
+    var clear = useCallback(function () {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+    }, []);
+    useEffect(function () {
+        set();
+        return clear;
+    }, [delay, set, clear]);
+    var reset = useCallback(function () {
+        clear();
+        set();
+    }, [clear, set]);
+    return { reset: reset, clear: clear };
+}

package/lib/esm/useToggle/index.d.ts

@@ -0,0 +1,2 @@
+import { Toggle, Value } from "./types";
+export default function useToggle(defaultValue?: Value): Toggle;

package/lib/esm/useToggle/index.js

@@ -0,0 +1,9 @@
+import { useState } from "react";
+export default function useToggle(defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = useState(defaultValue), value = _a[0], setValue = _a[1];
+    function toggleValue(newValue) {
+        setValue(function (currentValue) { return (typeof newValue === "boolean" ? newValue : !currentValue); });
+    }
+    return [value, toggleValue];
+}

package/lib/esm/useUpdateEffect/index.d.ts

@@ -0,0 +1,2 @@
+import { Callback, Dependencies } from "./types";
+export default function useUpdateEffect(callback: Callback, dependencies: Dependencies): void;

package/lib/esm/useUpdateEffect/index.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+export default function useUpdateEffect(callback, dependencies) {
+    var firstRenderRef = useRef(true);
+    useEffect(function () {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+            return;
+        }
+        return callback();
+    }, dependencies);
+}

package/lib/esm/useWindowSize/index.d.ts

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

package/lib/esm/useWindowSize/index.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import useEventListener from "../useEventListener";
+export default function useWindowSize() {
+    var _a = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }), windowSize = _a[0], setWindowSize = _a[1];
+    useEventListener("resize", function () {
+        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    });
+    return windowSize;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@grantpearceuk/hooks",
+  "version": "0.1.0",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
+  "scripts": {
+    "release": "standard-version",
+    "test": "react-scripts test --watchAll=false",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "publish-public": "npm publish --access public"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "copy-to-clipboard": "^3.3.1",
+    "js-cookie": "^3.0.1",
+    "lodash": "^4.17.21",
+    "react-scripts": "4.0.3",
+    "standard-version": "^9.5.0",
+    "web-vitals": "^1.1.2"
+  },
+  "devDependencies": {
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.0.1",
+    "@types/js-cookie": "^3.0.0",
+    "@types/lodash": "^4.14.175",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.4.1",
+    "typescript": "^4.4.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "files": [
+    "/lib"
+  ]
+}