1.0.3 • Published 10 months ago
react-custom-hooks-utils v1.0.3
react-custom-hooks-utils
Installation
NPM
npm install react-custom-hooks-utilsYARN
yarn add react-custom-hooks-utilsHow To Use
useArray
import useArray from "react-custom-hooks-utils/dist/useArray";
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>
);
}
export default App;useAsync
import useAsync from "react-custom-hooks-utils/dist/useAsync";
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>
);
}
export default App;useClickOutside
import { useRef, useState } from "react";
import useClickOutside from "react-custom-hooks-utils/dist/useClickOutside";
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>
</>
);
}
export default App;useCookie
import useCookie from "react-custom-hooks-utils/dist/useCookie";
function App() {
const [value, update, remove] = useCookie("name", "Ammar");
return (
<>
<div>{value}</div>
<button onClick={() => update("Mohammed")}>Change Name To Mohammed</button>
<button onClick={remove}>Delete Name</button>
</>
);
}
export default App;useCopyToClipboard
import useCopyToClipboard from "react-custom-hooks-utils/dist/useCopyToClipboard";
function App() {
const [copyToClipboard, { success }] = useCopyToClipboard();
return (
<>
<button onClick={() => copyToClipboard("This was copied")}>{success ? "Copied" : "Copy Text"}</button>
<input type="text" />
</>
);
}
export default App;useDebounce
import { useState } from "react";
import useDebounce from "react-custom-hooks-utils/dist/useDebounce";
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>
);
}
export default App;useDeepCompareEffect
import { useEffect, useState, useRef } from "react";
import useDeepCompareEffect from "react-custom-hooks-utils/dist/useDeepCompareEffect";
function App() {
const [age, setAge] = useState(0);
const [otherCount, setOtherCount] = useState(0);
const useEffectCountRef = useRef();
const useDeepCompareEffectCountRef = useRef();
const person = { age: age, name: "Ammar" };
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>
);
}
export default App;useEffectOnce
import { useState } from "react";
import useEffectOnce from "react-custom-hooks-utils/dist/useEffectOnce";
function App() {
const [count, setCount] = useState(0);
useEffectOnce(() => alert("Hi"));
return (
<>
<div>{count}</div>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
</>
);
}
export default App;useEventListener
import { useState } from "react";
import useEventListener from "react-custom-hooks-utils/dist/useEventListener";
function App() {
const [key, setKey] = useState("");
useEventListener("keydown", (e) => setKey(e.key));
return <div>Last Key: {key}</div>;
}
export default App;useFetch
import { useState } from "react";
import useFetch from "react-custom-hooks-utils/dist/useFetch";
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>
);
}
export default App;useGeoLocation
import { useState } from "react";
import useGeoLocation from "react-custom-hooks-utils/dist/useGeoLocation";
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>
</>
);
}
export default App;useHover
import { useRef } from "react";
import useHover from "react-custom-hooks-utils/dist/useHover";
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)"
}}
/>
);
}
export default App;useLongPress
import { useRef } from "react";
import useLongPress from "react-custom-hooks-utils/dist/useLongPress";
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)"
}}
/>
);
}
export default App;usePrevious
import { useState } from "react";
import usePrevious from "react-custom-hooks-utils/dist/usePrevious";
function App() {
const [count, setCount] = useState(0);
const [name, setName] = useState("Ammar");
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>
);
}
export default App;useRenderCount
import useRenderCount from "react-custom-hooks-utils/dist/useRenderCount";
import useToggle from "react-custom-hooks-utils/dist/useToggle";
function App() {
const [boolean, toggle] = useToggle(false);
const renderCount = useRenderCount();
return (
<>
<div>{boolean.toString()}</div>
<div>{renderCount}</div>
<button onClick={toggle}>Toggle</button>
</>
);
}
export default App;useScript
import useScript from "react-custom-hooks-utils/dist/useScript";
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>;
}
export default App;useStateWithHistory
import { useState } from "react";
import useStateWithHistory from "react-custom-hooks-utils/dist/useStateWithHistory";
function App() {
const [count, setCount, { history, pointer, back, forward, go }] = useStateWithHistory(1);
const [name, setName] = useState("Ammar");
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>
);
}
export default App;useStateWithValidation
import useStateWithValidation from "react-custom-hooks-utils/dist/useStateWithValidation";
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)} />
</>
);
}
export default App;useLocalStorage
import useLocalStorage from "react-custom-hooks-utils/dist/useStorage";
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>
);
}
export default App;useSessionStorage
import useSessionStorage from "react-custom-hooks-utils/dist/useStorage";
function App() {
const [name, setName, removeName] = useSessionStorage("name", "Ammar");
return (
<div>
<div>{name}</div>
<button onClick={() => setName("John")}>Set Name</button>
<button onClick={removeName}>Remove Name</button>
</div>
);
}
export default App;useTimeout
import { useState } from "react";
import useTimeout from "react-custom-hooks-utils/dist/useTimeout";
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>
);
}
export default App;useToggle
import useToggle from "react-custom-hooks-utils/dist/useToggle";
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>
);
}
export default App;useUpdateEffect
import { useState } from "react";
import useUpdateEffect from "react-custom-hooks-utils/dist/useUpdateEffect";
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>
);
}
export default App;useWindowSize
import useWindowSize from "react-custom-hooks-utils/dist/useWindowSize";
function App() {
const { width, height } = useWindowSize();
return (
<div>
{width} x {height}
</div>
);
}
export default App;