hooks-toolkit v1.0.3

Hooks Toolkit

Introduction

Hooks Toolkit is a collection of powerful and reusable React hooks to simplify state management, API calls, event listeners, and more. Built with TypeScript and optimized for React 19.

🚀 Features

• Lightweight & Fast: Tree-shakable, zero dependencies
• TypeScript: Full type safety and IntelliSense support
• React 19 Ready: Optimized for the latest React features
• Comprehensive: 35+ hooks for common use cases
• Well-documented: Clear examples and API references
• Unique Hooks: Specialized hooks not found in other libraries

📦 Installation

npm install hooks-toolkit

or with Yarn:

yarn add hooks-toolkit

Hooks Toolkit Documentation

Usage Example

import { useAsync } from "hooks-toolkit";

const fetchData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return res.json();
};

function App() {
  const { data, isPending, isSuccess, isError } = useAsync(fetchData, true);

  if (isPending) return <p>Loading...</p>;
  if (isError) return <p>Error loading data</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

export default App;

Hooks List

UI/DOM Hooks

useClickOutside

Detects clicks outside a specified element.

const ref = useRef(null);
useClickOutside(ref, () => console.log("Clicked outside!"));

useWindowSize

Retrieves the current window size.

const { width, height } = useWindowSize();

useMediaQuery

Checks if a media query matches.

const isMobile = useMediaQuery("(max-width: 768px)");

State Management Hooks

useLocalStorage

Manages state with localStorage persistence.

const [value, setValue] = useLocalStorage("key", "defaultValue");

useSessionStorage

Manages state with sessionStorage persistence.

const [value, setValue] = useSessionStorage("key", "defaultValue");

useToggle

Handles boolean state toggling.

const [isOn, toggle] = useToggle(false);

Performance Hooks

useDebounce

Delays function execution until after a timeout.

const debouncedValue = useDebounce(value, 500);

useThrottle

Limits function execution frequency.

const throttledFunction = useThrottle(callback, 1000);

useMemoCompare

Memoizes a value with deep comparison.

const memoizedValue = useMemoCompare(value, (prev, next) => isEqual(prev, next));

Browser API Hooks

useGeolocation

Gets the user's geolocation.

const { latitude, longitude } = useGeolocation();

useOnlineStatus

Detects online/offline status.

const isOnline = useOnlineStatus();

useDocumentTitle

Dynamically updates the document title.

useDocumentTitle("My Page Title");

Form Hooks

useForm

Handles form state.

const { state, { handleChange, handleBlur, handleSubmit, setFieldValue, setFieldTouched, resetForm } } = useForm(initialState, onSubmit);

useInput

Handles controlled input state.

const { value, onChange, onBlur, onFocus, reset, isTouched } = useInput("");

Data Fetching Hooks

useFetch

Fetches data with built-in loading/error states.

const { data, loading, error, refetch } = useFetch("https://api.example.com");

useAsync

Handles async operations with status tracking.

const { status, data, execute, isIdle, isPending, isSuccess, isError } = useAsync(fetchData, true);

Animation Hooks

useAnimation

Manages animation frame loops.

useAnimation((deltaTime) => console.log(deltaTime));

useIntersectionObserver

Observes an element's visibility in the viewport.

const [ref, isVisible] = useIntersectionObserver();

Media Hooks

useImageLoad

Detects when an image has loaded.

const { isLoading, isLoaded, error } = useImageLoad(imageUrl);

useAudio

Handles audio playback state.

const [ state, controls ] = useAudio(audioUrl);

useVideo

Controls video playback.

const [ state, controls ] = useVideo(videoRef);

Lifecycle Hooks

useMount

Runs a function on component mount.

useMount(() => console.log("Mounted"));

useUnmount

Runs a function on component unmount.

useUnmount(() => console.log("Unmounted"));

useUpdateEffect

Runs only on state updates (not on mount).

useUpdateEffect(() => console.log("Updated"), [value]);

Miscellaneous Utility Hooks

useCopyToClipboard

Copies text to the clipboard.

const [state, copy] = useCopyToClipboard();

useEventListener

Adds event listeners with automatic cleanup.

useEventListener("click", handleClick);

useHover

Detects hover state.

const [ref, isHovered] = useHover();

useKeyPress

Detects key presses.

const isEnterPressed = useKeyPress("Enter");

useInterval

Runs a function at a set interval.

useInterval(() => console.log("Tick"), 1000);

useTimeout

Delays function execution.

const { reset, clear } = useTimeout(() => console.log("Timeout!"), 3000);

useScrollPosition

Tracks the scroll position.

const { x, y } = useScrollPosition();

useContextMenu

Handles custom context menu events.

const { visible, x, y, show, hide } = useContextMenu();

useClipboard

Manages clipboard interactions.

const { state, copy } = useClipboard();

useRenderCount

Counts component re-renders.

const count = useRenderCount();

useIsMounted

Checks if a component is mounted.

const isMounted = useIsMounted();

usePrevious

Gets the previous state or prop value.

const previousValue = usePrevious(currentValue);

useStateWithHistory

Tracks state history.

const [state, setState, history, pointer, back, forward, go] = useStateWithHistory(initialValue);

Contributing

PRs are welcome! 🎉 If you'd like to contribute, please check our Contributing Guide.

License

This project is licensed under the MIT License.