A library of reusable React hooks, components, and utilities built by ZL Asica.
Assigns a UUID to each element in the array.
Scrolls to the top of the page or a specified vertical position.
Converts a camelCase string to kebab-case.
Capitalizes the first letter of a string. Just like String.prototype.charAt(0).toUpperCase(),
but without the need to call slice(1) to get the rest of the string.
Chunks an array into smaller arrays of a specified size.
Clamps a number to a specified range.
Copies the given text to the clipboard.
Creates a deep clone of an object using structuredClone.
Formats a Date object into a string according to the specified format.
Generates a unique identifier by hashing an array of input strings, a timestamp, and a random value.
Gets the day of the week for a given date.
Gets a relative day description based on a given date, e.g., 'Yesterday', 'Last Friday', '2 weeks ago Thursday'.
Retrieves the current scroll position of the window.
A helper function to check if an number array contains all zeros or empty.
Checks if a value is an empty object, array, string, or falsy value.
Determines whether a value is a non-array object.
Checks if two Date objects fall on the same calendar day.
Linearly interpolates between two numbers.
Maps a number from one range to another.
Deeply merges two objects into a single object.
Omits specified keys from an object.
Retrieves text from the clipboard.
Picks specified keys from an object.
Generates a random floating-point number between min and max.
Generates a random integer between min and max (inclusive).
Removes special characters from a string, preserving letters, numbers, and spaces.
Reverses the characters in a string.
Converts a string to snake_case.
Truncates a string to a specified length, appending '...' if truncated.
Truncate a string to the nearest whole word within a given length limit. If the string exceeds the max length, it appends '...' at the end. If no space is found within the truncated string, and the string is longer than the max length, it will truncate the string at the max length and append '...'.
Removes duplicate elements from an array.
A hook that adapts to the environment: uses useLayoutEffect on the client side
and useEffect on the server side. This ensures compatibility with both SSR
and CSR environments.
A custom React hook for managing an array state with helper functions to modify it.
A custom React hook to handle asynchronous functions with state management for loading, error, and result. Useful for API calls or other asynchronous operations.
A custom React hook for managing a boolean state with helper functions.
Provides functions to toggle the value, set it to true, or set it to false.
A custom React hook that detects clicks or touch events outside the specified target element. It is useful for closing dropdowns, modals, or menus when a user interacts outside the specified element. The handler function is called when the user clicks or touches outside the referenced element. Optionally, events can be debounced for better performance in rapid interaction scenarios.
A custom React hook for managing a numeric counter state with helper functions. Provides functions to increment, decrement, and reset the counter value.
useDebounce
A custom React hook to debounce a callback function. The debounced function will only be executed after a specified period of inactivity.
A custom React hook for attaching an event listener to a target element with automatic cleanup. This hook is useful for adding event listeners to DOM elements or the window object. It also supports optional debouncing to limit how often the handler is invoked.
A custom React hook to fetch data from an API and manage its state. Automatically handles loading, error, and result states. Supports cancellation of the fetch operation on component unmount.
Custom hook to toggle visibility on scroll. It hides the element when scrolling down and shows it when scrolling up.
A custom React hook to track whether a referenced element is being hovered.
A custom React hook that uses the Intersection Observer API to determine if an element is visible within the viewport.
A custom React hook to check if a DOM element is within the viewport. Allows specifying an offset to consider elements near the edge of the viewport as "visible".
A custom React hook to track whether a specific element (or the page) is scrolled to the bottom.
It supports global targets (e.g., window or document.documentElement) and specific HTMLElements.
A custom React hook to track whether a specific element (or the page) is scrolled to the top.
It supports global targets (e.g., window or document.documentElement) and specific HTMLElements.
A custom React hook to track whether a specific key is pressed. This hook is useful for implementing keyboard shortcuts or detecting specific key actions in your application. The key detection is case-sensitive and supports optional debouncing for optimized performance during rapid key presses.
A custom React hook for managing state that is synchronized with localStorage.
Provides error handling by returning a status object along with the value and setter.
A React hook that safely obfuscates an email address to prevent spam bots from detecting it in the source HTML or static JavaScript.
A custom React hook to execute a callback function at a fixed interval.
Supports dynamically updating the callback or stopping the polling by setting the delay to null.
A custom React hook to track the vertical scroll position of a specific element or the window. Automatically updates whenever the user scrolls.
A custom React hook for managing state that is synchronized with sessionStorage.
Provides error handling by returning a status object along with the value and setter.
Custom React hook to manage dark mode with automatic expiration.
A custom React hook to throttle the execution of a callback function. Ensures the callback is only executed at most once every specified delay.
Hook that runs a function after a specified delay. The timeout resets if the dependencies change.
A custom React hook for managing a boolean toggle state.
Provides the current value and a function to toggle it between true and false.
A custom React hook to track the current window size. Automatically updates whenever the window is resized.
Assigns a UUID to each element in the array.
Scrolls to the top of the page or a specified vertical position.
Converts a camelCase string to kebab-case.
Capitalizes the first letter of a string. Just like String.prototype.charAt(0).toUpperCase(),
but without the need to call slice(1) to get the rest of the string.
Chunks an array into smaller arrays of a specified size.
Clamps a number to a specified range.
Copies the given text to the clipboard.
Creates a deep clone of an object using structuredClone.
Formats a Date object into a string according to the specified format.
Generates a unique identifier by hashing an array of input strings, a timestamp, and a random value.
Gets the day of the week for a given date.
Gets a relative day description based on a given date, e.g., 'Yesterday', 'Last Friday', '2 weeks ago Thursday'.
Retrieves the current scroll position of the window.
A helper function to check if an number array contains all zeros or empty.
Checks if a value is an empty object, array, string, or falsy value.
Determines whether a value is a non-array object.
Checks if two Date objects fall on the same calendar day.
Linearly interpolates between two numbers.
Maps a number from one range to another.
Deeply merges two objects into a single object.
Omits specified keys from an object.
Retrieves text from the clipboard.
Picks specified keys from an object.
Generates a random floating-point number between min and max.
Generates a random integer between min and max (inclusive).
Removes special characters from a string, preserving letters, numbers, and spaces.
Reverses the characters in a string.
Converts a string to snake_case.
Truncates a string to a specified length, appending '...' if truncated.
Truncate a string to the nearest whole word within a given length limit. If the string exceeds the max length, it appends '...' at the end. If no space is found within the truncated string, and the string is longer than the max length, it will truncate the string at the max length and append '...'.
Removes duplicate elements from an array.