96jd-react-hooks-utils

v18.0.4

Published

24 days ago

Utility for custom hooks in React

Downloads

121

96jd-react-hooks-utils

Installation

NPM

npm install 96jd-react-hooks-utils

YARN

yarn add 96jd-react-hooks-utils

PNPM

pnpm add 96jd-react-hooks-utils

BUN

bun 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>
	);
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

96jd-react-hooks-utils

Installation

NPM

YARN

PNPM

BUN

Getting started

useArray

useAsync

useClickOutside

useCookie

useCopyToClipboard

useDebounce

useDeepCompareEffect

useEffectOnce

useEventListener

useFetch

useGeoLocation

useHover

useLongPress

usePrevious

useRenderCount

useScript

useStateWithHistory

useStateWithValidation

useLocalStorage

useSessionStorage

useTimeout

useToggle

useUpdateEffect

useWindowSize