A collection of powerful, reusable custom React hooks for complex, non-trivial interactions that go beyond React’s native features.

Built with performance and developer ergonomics in mind, these hooks help you accelerate development and build more interactive experiences effortlessly.

• 🌐 Fully typed with TypeScript
• 🧠 Designed for advanced and non-standard use cases
• 🧹 Pluggable and composable React hooks
• 🔧 Minimal dependencies, lightweight and tree-shakable
• 🔓 Open-source and community-driven

npm install react-hooks-bank

Or using yarn:

yarn add react-hooks-bank

Import the hooks you need and use them in your components:

import { useInfiniteScroll } from "react-hooks-bank"; const MyComponent = () => { const isLoading = useInfiniteScroll(() => { // Callback when scroll reaches threshold fetchMoreItems(); }); return ( <div> {/* Your list rendering */} {isLoading && <p>Loading more...</p>} </div> ); };

Click a hook to jump to detailed usage instructions:

• useClickOutside
• useDebouncedValue
• useFetch
• useGeolocation
• useHover
• useInfiniteScroll
• useIntersectionObserver
• useLockBodyScroll
• useNetworkStatus
• useThrottle
• useDeviceInfo
• useOrientation
• useCopyToClipboard

Purpose: Detect clicks outside a specific DOM element.

How to use:

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

Returns: void

Parameters:

• ref: RefObject<HTMLElement> - Required: Element to monitor
• callback: () => void - Required: Triggered when clicking outside

Purpose: Return a debounced version of a value.

How to use:

const debouncedValue = useDebouncedValue(searchTerm, 500);

Returns: any – Debounced value

Parameters:

• value: any – Required: The value to debounce
• delay: number – Required: Delay in ms

Purpose: Fetch data with loading and error state.

How to use:

const { data, loading, error } = useFetch('/api/data');

Returns: { data, loading, error }

Parameters:

• url: string – Required: Endpoint URL
• options?: RequestInit – Optional fetch options

Purpose: Track user's geolocation.

How to use:

const { coords, error } = useGeolocation();

Returns: { coords, error }

Parameters:

• options?: PositionOptions – Optional navigator geolocation options

Purpose: Detect hover state on an element.

How to use:

const { ref, hovered } = useHover();

Returns: { ref, hovered }

Parameters: None

Purpose: Trigger callback when scrolled to bottom threshold.

How to use:

const isLoading = useInfiniteScroll(() => loadMoreItems());

Returns: boolean – true if loading

Parameters:

• callback: () => void – Required
• threshold?: number – Distance in px to bottom (default: 100)

Purpose: Observe if an element is visible in viewport.

How to use:

const { ref, entry } = useIntersectionObserver();

Returns: { ref, entry }

Parameters:

• options?: IntersectionObserverInit

Purpose: Prevent body scroll when active.

How to use:

useLockBodyScroll();

Returns: void

Parameters: None

Purpose: Detect online/offline network status.

How to use:

const isOnline = useNetworkStatus();

Returns: boolean

Parameters: None

Purpose: Throttle a value change over time.

How to use:

const throttled = useThrottle(value, 300);

Returns: any – Throttled value

Parameters:

• value: any – Required
• delay: number – Required

Purpose: Retrieve device OS, browser, and screen info.

How to use:

const { os, browser, screen } = useDeviceInfo();

Returns: { os, browser, screen }

Parameters: None

Purpose: Track screen orientation and angle.

How to use:

const { angle, type } = useOrientation();

Returns: { angle: number, type: string }

Parameters: None

Purpose: Simplifies copying text to the user’s clipboard and reporting success/failure.

How to use:

const [ copy, isCopied ] = useCopyToClipboard();

Returns: [ copy: (text: string) => Promise<boolean>, isCopied: boolean ]

Parameters: None

To run the project locally:

git clone https://github.com/mysticwillz/react-hooks-bank.git cd react-hooks-bank npm install npm run build

Contributions are very welcome!

If you'd like to add a new hook, improve documentation, or fix a bug:

1. Fork the repo
2. Create a new branch
3. Submit a PR

Please follow the guidelines in CONTRIBUTING.md.

This project is licensed under the MIT License

Built with ❤️ by Eze Williams Ezebuilo

• Twitter: @mysticwillz
• LinkedIn: mysticwillz

If this project helps you or you’d like to collaborate, star the repo and share it with other developers!