u-hook - A Collection of Custom React Hooks
🚀 Welcome to u-hook, a library of custom React hooks for supercharging your React applications.
Installation
To install u-hook, use your preferred package manager:
npm install @shubhamssingh/u-hook
# or
yarn add @shubhamssingh/u-hook
# or
pnpm install @shubhamssingh/u-hookWhat is u-hook?
u-hook, formerly known as U-Hook, is a collection of custom React hooks designed to simplify common patterns and functionality in React applications. Each hook is designed to be easy to use and integrate into your projects.
List of Hooks
useArray
Maintains and manipulates state for an array with methods like push, filter, update, remove, and clear.
Usage
import React from "react";
import { useArray } from "@shubhamssingh/u-hook";
function MyComponent() {
const { array, push, filter, update, remove, clear } = useArray([
1, 2, 3, 4, 5,
]);
// Adding a new element
push(6);
// Filtering the array
filter((value) => value > 2);
// Updating an element at a specific index
update(1, 10);
// Removing an element at a specific index
remove(3);
// Clearing the entire array
clear();
return (
<div>
{/* Render your component with the updated array */}
{array.map((item) => (
<span key={item}>{item} </span>
))}
</div>
);
}
export default MyComponent;useAsync
Handles asynchronous operations and manages loading, error, and data states.
Usage
import React from "react";
import { useAsync } from "@shubhamssingh/u-hook";
// Define an asynchronous function to be used with useAsync
const fetchData: () => Promise<any> = async () => {
// Simulate an asynchronous operation (e.g., fetching data from an API)
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
};
function MyAsyncComponent() {
// Usage of useAsync hook [] => is the list of dependencies
const { loading, error, value }: UseAsyncResult = useAsync(fetchData, []);
return (
<div>
{loading && <p>Loading...</p>}
{error && <p>Error: {error}</p>}
{value && (
<div>
<h1>Data:</h1>
{/* Render your component with the fetched data */}
{JSON.stringify(value, null, 2)}
</div>
)}
</div>
);
}
export default MyAsyncComponent;useClickOutside
Detects clicks outside a specified element, useful for handling click events outside a modal or dropdown.
Usage
import React, { useRef } from "react";
import { useClickOutside } from "@shubhamssingh/u-hook";
function MyComponent() {
const myRef = useRef(null);
const handleClickOutside = (event) => {
// Handle the click outside logic here
console.log("Clicked outside!", event);
};
// Attach the click outside listener to the component's ref
useClickOutside(myRef, handleClickOutside);
return (
<div ref={myRef}>
<h1>Click inside or outside me!</h1>
</div>
);
}
export default MyComponent;useDebounce
Delays the execution of a function until after a specified delay, useful for handling input debounce.
Usage
import React, { useState, useEffect } from "react";
import { useDebounce } from "@shubhamssingh/u-hook";
function MyComponent() {
const [inputValue, setInputValue] = useState("");
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleDebouncedInputChange = () => {
// Your logic to handle the debounced input change
console.log("Debounced input value:", inputValue);
};
// Use the useDebounce hook to debounce the input change callback
useDebounce({
callback: handleDebouncedInputChange,
delay: 500, // Set your desired debounce delay in milliseconds
dependencies: [inputValue], // Add the input value as a dependency
});
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Type something..."
/>
</div>
);
}
export default MyComponent;useEffectOnce
Runs an effect only once when the component mounts, similar to componentDidMount.
Usage
import React from "react";
import { useEffectOnce } from "@shubhamssingh/u-hook";
function MyComponent() {
// useEffectOnce will run the provided callback only once
useEffectOnce(() => {
// Your logic to run only once when the component mounts
console.log("Component is mounted!");
});
return (
<div>
<h1>Hello, useEffectOnce!</h1>
</div>
);
}
export default MyComponent;useEventListener
Attaches event listeners to elements and handles event callback functions.
Usage
import React from "react";
import { useEventListener } from "@shubhamssingh/u-hook";
function MyComponent() {
const handleKeyPress = (event) => {
// Your logic to handle key press events
console.log("Key pressed:", event.key);
};
// Use the useEventListener hook to listen for key press events on the document
useEventListener("keypress", handleKeyPress, document);
return (
<div>
<h1>Press a key to see the event!</h1>
</div>
);
}
export default MyComponent;useGeolocation
Tracks the user's geolocation and provides loading, error, and data states.
Usage
import React from "react";
import { useGeolocation } from "@shubhamssingh/u-hook";
function LocationComponent() {
// Use the useGeolocation hook to get the current location
const { loading, error, data } = useGeolocation();
return (
<div>
<h1>Geolocation Example</h1>
{loading && <p>Loading...</p>}
{error && (
<p>
Error: {error.code} - {error.message}
</p>
)}
{data.latitude && data.longitude && (
<div>
<p>Latitude: {data.latitude}</p>
<p>Longitude: {data.longitude}</p>
<p>Accuracy: {data.accuracy} meters</p>
{data.altitude != null && <p>Altitude: {data.altitude} meters</p>}
{data.altitudeAccuracy != null && (
<p>Altitude Accuracy: {data.altitudeAccuracy} meters</p>
)}
{data.heading != null && <p>Heading: {data.heading} degrees</p>}
{data.speed != null && <p>Speed: {data.speed} meters/second</p>}
<p>Timestamp: {data.timestamp}</p>
</div>
)}
</div>
);
}
export default LocationComponent;useHover
Detects whether an element is currently being hovered over.
Usage
import React, { useRef } from "react";
import { useHover } from "@shubhamssingh/u-hook";
function HoverComponent() {
// Create a ref to attach to the element you want to track hover on
const myRef = useRef(null);
// Use the useHover hook to determine if the element is currently being hovered
const isHovered = useHover({ ref: myRef });
return (
<div>
<div
ref={myRef}
style={{
width: "200px",
height: "100px",
backgroundColor: isHovered ? "lightblue" : "lightgray",
padding: "10px",
}}
>
{isHovered ? "Hovered!" : "Not Hovered!"}
</div>
</div>
);
}
export default HoverComponent;useLongPress
Triggers a callback function after a long press on a specified element.
Usage
import React, { useRef } from "react";
import { useLongPress } from "@shubhamssingh/u-hook";
function LongPressComponent() {
// Create a ref to attach to the element you want to track long press on
const myRef = useRef(null);
// Define the callback function to be executed on long press
const handleLongPress = () => {
console.log("Long press detected!");
// Your logic for long press action goes here
};
// Use the useLongPress hook to set up long press behavior
useLongPress({ ref: myRef, cb: handleLongPress, options: { delay: 1000 } });
return (
<div>
<button ref={myRef}>Press and hold me!</button>
</div>
);
}
export default LongPressComponent;useOnlineStatus
Tracks the online/offline status of the user.
Usage
import React from "react";
import { useOnlineStatus } from "@shubhamssingh/u-hook";
function OnlineStatusComponent() {
// Use the useOnlineStatus hook to track online status
const isOnline = useOnlineStatus();
return (
<div>
<h1>{isOnline ? "Online" : "Offline"}</h1>
</div>
);
}
export default OnlineStatusComponent;useOnScreen
Detects whether an element is currently visible on the screen.
Usage
import React, { useRef } from "react";
import { useOnScreen } from "@shubhamssingh/u-hook";
function OnScreenComponent() {
// Create a ref to attach to the element you want to track visibility for
const myRef = useRef(null);
// Use the useOnScreen hook to track whether the element is currently visible on the screen
const isOnScreen = useOnScreen(myRef);
return (
<div>
<div
ref={myRef}
style={{
height: "200px",
backgroundColor: isOnScreen ? "lightgreen" : "lightgray",
padding: "10px",
}}
>
{isOnScreen ? "On Screen!" : "Not On Screen!"}
</div>
<p>Scroll down to see changes!</p>
</div>
);
}
export default OnScreenComponent;usePrevious
Returns the previous value of a state or variable.
Usage
import React, { useState, useEffect } from "react";
import { usePrevious } from "@shubhamssingh/u-hook";
function PreviousValueComponent() {
// State to store the current value
const [count, setCount] = useState(0);
// Use the usePrevious hook to get the previous value of the count
const previousCount = usePrevious(count);
// Function to increment the count
const incrementCount = () => setCount((prevCount) => prevCount + 1);
return (
<div>
<p>Current Count: {count}</p>
<p>
Previous Count: {previousCount !== undefined ? previousCount : "N/A"}
</p>
<button onClick={incrementCount}>Increment Count</button>
</div>
);
}
export default PreviousValueComponent;useRenderCount
Counts the number of times a component renders.
Usage
import React from "react";
import { useRenderCount } from "@shubhamssingh/u-hook";
function RenderCountComponent() {
// Use the useRenderCount hook to get the render count of the component
const renderCount = useRenderCount();
return (
<div>
<h1>Render Count: {renderCount}</h1>
</div>
);
}
export default RenderCountComponent;useScript
Dynamically loads an external script and provides loading and error states.
Usage
import React from "react";
import { useScript } from "@shubhamssingh/u-hook";
function ScriptLoaderComponent() {
// Use the useScript hook to asynchronously load a script
const scriptStatus = useScript("https://example.com/script.js");
return (
<div>
<h1>Script Loader Example</h1>
{scriptStatus.loading && <p>Loading script...</p>}
{scriptStatus.error && <p>Error loading script</p>}
{!scriptStatus.loading && !scriptStatus.error && (
<p>Script loaded successfully!</p>
)}
</div>
);
}
export default ScriptLoaderComponent;useSize
Tracks the size of a specified element using the ResizeObserver API.
Usage
import React, { useRef } from "react";
import { useSize } from "@shubhamssingh/u-hook";
function SizeComponent() {
// Create a ref to attach to the element you want to track size for
const myRef = useRef(null);
// Use the useSize hook to get the width and height of the element
const size = useSize(myRef);
return (
<div>
<h1>Element Size</h1>
<div
ref={myRef}
style={{
width: "50%",
height: "100px",
backgroundColor: "lightblue",
padding: "10px",
}}
>
<p>Width: {size.width}px</p>
<p>Height: {size.height}px</p>
</div>
<p>Resize the element to see changes!</p>
</div>
);
}
export default SizeComponent;useStateWithValidation
Manages a state with a validation function to ensure the value meets specific criteria.
Usage
import React from "react";
import { useStateWithValidation } from "@shubhamssingh/u-hook";
function ValidationComponent() {
// Validation function that checks if a number is even
const isEven = (value) => value % 2 === 0;
// Use the useStateWithValidation hook to manage a state with validation
const [number, setNumber, isValid] = useStateWithValidation(isEven, 0);
return (
<div>
<h1>State with Validation</h1>
<label>
Enter a number:{" "}
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
</label>
{isValid ? (
<p>Entered number is even.</p>
) : (
<p>Entered number is not even.</p>
)}
</div>
);
}
export default ValidationComponent;useStorage
Manages state stored in either local or session storage.
Usage
import React from "react";
import { useStorage } from "@shubhamssingh/u-hook";
function StorageComponent() {
// Example using useLocalStorage hook
const [localStorageValue, setLocalStorageValue, removeLocalStorageValue] =
useStorage.useLocalStorage("myKey", "defaultValue");
// Example using useSessionStorage hook
const [
sessionStorageValue,
setSessionStorageValue,
removeSessionStorageValue,
] = useStorage.useSessionStorage("myKey", "defaultValue");
return (
<div>
<h1>Storage Examples</h1>
<div>
<h2>Local Storage</h2>
<label>
Local Storage Value:{" "}
<input
type="text"
value={localStorageValue}
onChange={(e) => setLocalStorageValue(e.target.value)}
/>
</label>
<button onClick={removeLocalStorageValue}>
Remove from Local Storage
</button>
</div>
<div>
<h2>Session Storage</h2>
<label>
Session Storage Value:{" "}
<input
type="text"
value={sessionStorageValue}
onChange={(e) => setSessionStorageValue(e.target.value)}
/>
</label>
<button onClick={removeSessionStorageValue}>
Remove from Session Storage
</button>
</div>
</div>
);
}
export default StorageComponent;useTimeout
Executes a callback function after a specified delay.
Usage
import React from "react";
import { useTimeout } from "@shubhamssingh/u-hook";
function TimeoutComponent() {
// Define the callback function to be executed after the timeout
const handleTimeout = () => {
console.log("Timeout reached!");
// Your logic for the timeout action goes here
};
// Use the useTimeout hook to set up a timeout with a 2000ms delay
const { reset, clear } = useTimeout(handleTimeout, 2000);
// Function to manually trigger the timeout
const triggerTimeout = () => {
console.log("Manually triggering timeout!");
reset(); // Resetting the timeout
};
return (
<div>
<h1>Timeout Example</h1>
<button onClick={triggerTimeout}>Trigger Timeout</button>
</div>
);
}
export default TimeoutComponent;useToggle
Toggles between true and false states.
Usage
import React from "react";
import { useToggle } from "@shubhamssingh/u-hook";
function ToggleComponent() {
// Use the useToggle hook to manage a boolean state
const [isToggled, toggle] = useToggle(false);
return (
<div>
<h1>Toggle Example</h1>
<p>Current State: {isToggled ? "ON" : "OFF"}</p>
<button onClick={() => toggle()}>Toggle</button>
</div>
);
}
export default ToggleComponent;useUpdateEffect
Runs an effect only when dependencies change, excluding the initial render.
Usage
import React, { useState } from "react";
import { useUpdateEffect } from "@shubhamssingh/u-hook";
function UpdateEffectComponent() {
// State to track changes
const [count, setCount] = useState(0);
// Use the useUpdateEffect hook to run an effect only on subsequent renders
useUpdateEffect(() => {
console.log("Effect triggered on update. Count:", count);
}, [count]);
// Function to update the count
const incrementCount = () => setCount((prevCount) => prevCount + 1);
return (
<div>
<h1>Update Effect Example</h1>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment Count</button>
</div>
);
}
export default UpdateEffectComponent;useWindowSize
Tracks the dimensions of the browser window.
Usage
import React from "react";
import { useWindowSize } from "@shubhamssingh/u-hook";
function WindowSizeComponent() {
// Use the useWindowSize hook to track the window size
const { width, height } = useWindowSize();
return (
<div>
<h1>Window Size Example</h1>
<p>Window Width: {width}px</p>
<p>Window Height: {height}px</p>
</div>
);
}
export default WindowSizeComponent;useMergeState
Manages the merging of state updates in React components.
Usage
import React from "react";
import { useMergeState } from "@shubhamssingh/u-hook";
function MergeStateComponent() {
// Use the useMergeState hook to manage a merged state
const [state, mergeState] = useMergeState({ key1: "value1" });
// Example of updating the state using mergeState
const updateState = () => {
mergeState({ key2: "value2" });
};
return (
<div>
<h1>Merge State Example</h1>
<p>Current State:</p>
<pre>{JSON.stringify(state, null, 2)}</pre>
<button onClick={updateState}>Update State</button>
</div>
);
}
export default MergeStateComponent;import React from "react";
import { useMergeState } from "@shubhamssingh/u-hook";
function MergeStateWithCallbackComponent() {
// Use the useMergeState hook with an initial state
const [state, mergeState] = useMergeState({ count: 0 });
// Example of updating the state with a callback function
const incrementCount = () => {
mergeState((currentState) => ({ count: currentState.count + 1 }));
};
return (
<div>
<h1>Merge State with Callback Example</h1>
<p>Current Count: {state.count}</p>
<button onClick={incrementCount}>Increment Count</button>
</div>
);
}
export default MergeStateWithCallbackComponent;Contribution 
If you have additional hooks or improvements to existing ones, feel free to contribute!
License
u-hook is MIT licensed with ❤️ by Shubham Singh.