96jd-react-hooks-utils

Installation

NPM

npm install 96jd-react-hooks-utils

YARN

yarn add 96jd-react-hooks-utils

Getting started

useArray

import useArray from "96jd-react-hooks-utils/dist/useArray";

export default function App() {
	const { array, set, push, remove, filter, update, clear } = useArray([1, 2, 3, 4, 5, 6]);

	return (
		<div>
			<div>{array.join(", ")}</div>
			<button onClick={() => push(7)}>Add 7</button>
			<button onClick={() => update(1, 9)}>Change Second Element To 9</button>
			<button onClick={() => remove(1)}>Remove Second Element</button>
			<button onClick={() => filter((n) => n < 3)}>Keep Numbers Less Than 4</button>
			<button onClick={() => set([1, 2])}>Set To 1, 2</button>
			<button onClick={clear}>Clear</button>
		</div>
	);
}

useAsync

import useAsync from "96jd-react-hooks-utils/dist/useAsync";

export default function App() {
	const { loading, error, value } = useAsync(
		() =>
			new Promise((resolve, reject) => {
				const success = false;
				setTimeout(() => {
					success ? resolve("Hi") : reject("Error");
				}, 1000);
			})
	);

	return (
		<div>
			<div>Loading: {loading.toString()}</div>
			<div>{error}</div>
			<div>{value}</div>
		</div>
	);
}

useClickOutside

import { useRef, useState } from "react";
import useClickOutside from "96jd-react-hooks-utils/dist/useClickOutside";

export default function App() {
	const [open, setOpen] = useState(false);
	const modalRef = useRef();

	useClickOutside(modalRef, () => open && setOpen(false));

	return (
		<>
			<button onClick={() => setOpen(true)}>Open</button>
			<div
				ref={modalRef}
				style={{
					display: open ? "block" : "none",
					backgroundColor: "blue",
					color: "white",
					width: "100px",
					height: "100px",
					position: "absolute",
					top: "calc(50% - 50px)",
					left: "calc(50% - 50px)"
				}}
			>
				<span>Modal</span>
			</div>
		</>
	);
}

useCookie

import useCookie from "96jd-react-hooks-utils/dist/useCookie";

export default function App() {
	const [value, update, remove] = useCookie("name", "Jacob");

	return (
		<>
			<div>{value}</div>
			<button onClick={() => update("Mohammed")}>Change Name To Mohammed</button>
			<button onClick={remove}>Delete Name</button>
		</>
	);
}

useCopyToClipboard

import useCopyToClipboard from "96jd-react-hooks-utils/dist/useCopyToClipboard";

export default function App() {
	const [copyToClipboard, { success }] = useCopyToClipboard();

	return (
		<>
			<button onClick={() => copyToClipboard("This was copied")}>{success ? "Copied" : "Copy Text"}</button>
			<input type="text" />
		</>
	);
}

useDebounce

import { useState } from "react";
import useDebounce from "96jd-react-hooks-utils/dist/useDebounce";

export default function App() {
	const [count, setCount] = useState(10);
	useDebounce(() => alert(count), 1000, [count]);

	return (
		<div>
			<div>{count}</div>
			<button onClick={() => setCount((c) => c + 1)}>Increment</button>
		</div>
	);
}

useDeepCompareEffect

import { useEffect, useState, useRef } from "react";
import useDeepCompareEffect from "96jd-react-hooks-utils/dist/useDeepCompareEffect";

export default function App() {
	const [age, setAge] = useState(0);
	const [otherCount, setOtherCount] = useState(0);
	const useEffectCountRef = useRef();
	const useDeepCompareEffectCountRef = useRef();

	const person = { age: age, name: "Jacob" };

	useEffect(() => {
		useEffectCountRef.current.textContent = parseInt(useEffectCountRef.current.textContent) + 1;
	}, [person]);

	useDeepCompareEffect(() => {
		useDeepCompareEffectCountRef.current.textContent =
			parseInt(useDeepCompareEffectCountRef.current.textContent) + 1;
	}, [person]);

	return (
		<div>
			<div>
				useEffect: <span ref={useEffectCountRef}>0</span>
			</div>
			<div>
				useDeepCompareEffect: <span ref={useDeepCompareEffectCountRef}>0</span>
			</div>
			<div>Other Count: {otherCount}</div>
			<div>{JSON.stringify(person)}</div>
			<button onClick={() => setAge((currentAge) => currentAge + 1)}>Increment Age</button>
			<button onClick={() => setOtherCount((count) => count + 1)}>Increment Other Count</button>
		</div>
	);
}

useEffectOnce

import { useState } from "react";
import useEffectOnce from "96jd-react-hooks-utils/dist/useEffectOnce";

export default function App() {
	const [count, setCount] = useState(0);

	useEffectOnce(() => alert("Hi"));

	return (
		<>
			<div>{count}</div>
			<button onClick={() => setCount((c) => c + 1)}>Increment</button>
		</>
	);
}

useEventListener

import { useState } from "react";
import useEventListener from "96jd-react-hooks-utils/dist/useEventListener";

export default function App() {
	const [key, setKey] = useState("");
	useEventListener("keydown", (e) => setKey(e.key));

	return <div>Last Key: {key}</div>;
}

useFetch

import { useState } from "react";
import useFetch from "96jd-react-hooks-utils/dist/useFetch";

export default function App() {
	const [id, setId] = useState(1);
	const { loading, error, value } = useFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {}, [id]);

	return (
		<div>
			<div>{id}</div>
			<button onClick={() => setId((currentId) => currentId + 1)}>Increment ID</button>
			<div>Loading: {loading.toString()}</div>
			<div>{JSON.stringify(error, null, 2)}</div>
			<div>{JSON.stringify(value, null, 2)}</div>
		</div>
	);
}

useGeoLocation

import { useState } from "react";
import useGeoLocation from "96jd-react-hooks-utils/dist/useGeoLocation";

export default function App() {
	const {
		loading,
		error,
		data: { latitude, longitude }
	} = useGeoLocation();

	return (
		<>
			<div>Loading: {loading.toString()}</div>
			<div>Error: {error?.message}</div>
			<div>
				{latitude} x {longitude}
			</div>
		</>
	);
}

useHover

import { useRef } from "react";
import useHover from "96jd-react-hooks-utils/dist/useHover";

export default function App() {
	const elementRef = useRef();
	const hovered = useHover(elementRef);

	return (
		<div
			ref={elementRef}
			style={{
				backgroundColor: hovered ? "blue" : "red",
				width: "100px",
				height: "100px",
				position: "absolute",
				top: "calc(50% - 50px)",
				left: "calc(50% - 50px)"
			}}
		/>
	);
}

useLongPress

import { useRef } from "react";
import useLongPress from "96jd-react-hooks-utils/dist/useLongPress";

export default function App() {
	const elementRef = useRef();
	useLongPress(elementRef, () => alert("Long Press"));

	return (
		<div
			ref={elementRef}
			style={{
				backgroundColor: "red",
				width: "100px",
				height: "100px",
				position: "absolute",
				top: "calc(50% - 50px)",
				left: "calc(50% - 50px)"
			}}
		/>
	);
}

usePrevious

import { useState } from "react";
import usePrevious from "96jd-react-hooks-utils/dist/usePrevious";

export default function App() {
	const [count, setCount] = useState(0);
	const [name, setName] = useState("Jacob");
	const previousCount = usePrevious(count);

	return (
		<div>
			<div>
				{count} - {previousCount}
			</div>
			<div>{name}</div>
			<button onClick={() => setCount((currentCount) => currentCount + 1)}>Increment</button>
			<button onClick={() => setName("Mohammed")}>Change Name</button>
		</div>
	);
}

useRenderCount

import useRenderCount from "96jd-react-hooks-utils/dist/useRenderCount";
import useToggle from "96jd-react-hooks-utils/dist/useToggle";

export default function App() {
	const [boolean, toggle] = useToggle(false);

	const renderCount = useRenderCount();

	return (
		<>
			<div>{boolean.toString()}</div>
			<div>{renderCount}</div>
			<button onClick={toggle}>Toggle</button>
		</>
	);
}

useScript

import useScript from "96jd-react-hooks-utils/dist/useScript";

export default function App() {
	const { loading, error } = useScript("https://code.jquery.com/jquery-3.6.0.min.js");

	if (loading) {
		return <div>Loading</div>;
	}
	if (error) {
		return <div>Error</div>;
	}
	return <div>{window.$(window).width()}</div>;
}

useStateWithHistory

import { useState } from "react";
import useStateWithHistory from "96jd-react-hooks-utils/dist/useStateWithHistory";

export default function App() {
	const [count, setCount, { history, pointer, back, forward, go }] = useStateWithHistory(1);
	const [name, setName] = useState("Jacob");

	return (
		<div>
			<div>{count}</div>
			<div>{history.join(", ")}</div>
			<div>Pointer - {pointer}</div>
			<div>{name}</div>
			<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("Mohammed")}>Change Name</button>
		</div>
	);
}

useStateWithValidation

import useStateWithValidation from "96jd-react-hooks-utils/dist/useStateWithValidation";

export default function App() {
	const [username, setUsername, isValid] = useStateWithValidation((name) => name.length > 5, "");

	return (
		<>
			<div>Valid: {isValid.toString()}</div>
			<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
		</>
	);
}

useLocalStorage

import useLocalStorage from "96jd-react-hooks-utils/dist/useStorage";

export default function App() {
	const [age, setAge, removeAge] = useLocalStorage("age", 28);

	return (
		<div>
			<div>{age}</div>
			<button onClick={() => setAge(40)}>Set Age</button>
			<button onClick={removeAge}>Remove Age</button>
		</div>
	);
}

useSessionStorage

import useSessionStorage from "96jd-react-hooks-utils/dist/useStorage";

export default function App() {
	const [name, setName, removeName] = useSessionStorage("name", "Jacob");

	return (
		<div>
			<div>{name}</div>
			<button onClick={() => setName("John")}>Set Name</button>
			<button onClick={removeName}>Remove Name</button>
		</div>
	);
}

useTimeout

import { useState } from "react";
import useTimeout from "96jd-react-hooks-utils/dist/useTimeout";

export default function App() {
	const [count, setCount] = useState(10);
	const { clear, reset } = useTimeout(() => setCount(0), 1000);

	return (
		<div>
			<div>{count}</div>
			<button onClick={() => setCount((c) => c + 1)}>Increment</button>
			<button onClick={clear}>Clear Timeout</button>
			<button onClick={reset}>Reset Timeout</button>
		</div>
	);
}

useToggle

import useToggle from "96jd-react-hooks-utils/dist/useToggle";

export default function App() {
	const [value, toggleValue] = useToggle(false);

	return (
		<div>
			<div>{value.toString()}</div>
			<button onClick={toggleValue}>Toggle</button>
			<button onClick={() => toggleValue(true)}>Make True</button>
			<button onClick={() => toggleValue(false)}>Make False</button>
		</div>
	);
}

useUpdateEffect

import { useState } from "react";
import useUpdateEffect from "96jd-react-hooks-utils/dist/useUpdateEffect";

export default function App() {
	const [count, setCount] = useState(10);
	useUpdateEffect(() => alert(count), [count]);

	return (
		<div>
			<div>{count}</div>
			<button onClick={() => setCount((c) => c + 1)}>Increment</button>
		</div>
	);
}

useWindowSize

import useWindowSize from "96jd-react-hooks-utils/dist/useWindowSize";

export default function App() {
	const { width, height } = useWindowSize();

	return (
		<div>
			{width} x {height}
		</div>
	);
}