# juliencrn/usehooks-ts

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/juliencrn-usehooks-ts).**

7,834 stars · 456 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/juliencrn/usehooks-ts
- Homepage: https://usehooks-ts.com
- awesome-repositories: https://awesome-repositories.com/repository/juliencrn-usehooks-ts.md

## Topics

`hook` `hooks` `mdx` `nextjs` `react` `react-hook` `react-hooks` `reactjs` `typescript`

## Description

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects.

The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimensions, and element visibility via intersection observers.

The library covers a broad range of capabilities, including state management for counters and sequential workflows, DOM event monitoring for outside click detection and element hovering, and performance optimizations like function debouncing. It further provides utilities for visual theme management, page scroll locking, and the synchronization of state across isomorphic rendering environments.

## Tags

### Web Development

- [React Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks.md) — A comprehensive collection of TypeScript-based hooks for managing state, side effects, and DOM interactions in React.
- [Browser API Hooks](https://awesome-repositories.com/f/web-development/browser-api-hooks.md) — Provides specialized hooks for interacting with browser-level APIs, the clipboard, and intersection observers.
- [Browser Storage](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-apis/browser-storage.md) — Implements interfaces for managing persistent client-side data storage and browser-native APIs.
- [Event Listener Management](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling/event-listener-management.md) — Offers utilities for programmatically attaching and removing event listeners to the window or specific DOM elements. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [DOM Interaction Hooks](https://awesome-repositories.com/f/web-development/dom-interaction-hooks.md) — Provides hooks for managing event-based DOM interactions, including window resizing and outside clicks.
- [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks/lifecycle-hooks.md) — Provides implementation patterns for managing component setup and cleanup using React hooks.
- [React State Primitives](https://awesome-repositories.com/f/web-development/react-state-primitives.md) — Provides reusable state management primitives for common patterns like counters and toggles.
- [Intersection Observer Implementations](https://awesome-repositories.com/f/web-development/intersection-observer-implementations.md) — Integrates the Intersection Observer API to detect element visibility within the viewport.
- [Isomorphic Effect Wrappers](https://awesome-repositories.com/f/web-development/isomorphic-effect-wrappers.md) — Ensures side effects run only in the browser to prevent hydration mismatch warnings during SSR. ([source](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect))
- [Mounted Component Guards](https://awesome-repositories.com/f/web-development/mounted-component-guards.md) — Includes a guard utility that prevents state updates on components after they have been unmounted. ([source](https://usehooks-ts.com/react-hook/use-is-mounted))
- [Boolean State Primitives](https://awesome-repositories.com/f/web-development/state-management/boolean-state-primitives.md) — Provides a simple state hook for managing true/false values with built-in toggle functionality. ([source](https://usehooks-ts.com/react-hook/use-toggle))
- [Debounced State Updates](https://awesome-repositories.com/f/web-development/state-update-handlers/debounced-state-updates.md) — Implements a debounced state utility to delay updates and reduce redundant processing. ([source](https://usehooks-ts.com/react-hook/use-debounce-value))

### Data & Databases

- [Session Storage Synchronization](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/data-persistence-storage/data-storage/session-storage-synchronization.md) — Implements hooks for synchronizing React state with the browser's session-scoped storage. ([source](https://usehooks-ts.com/react-hook/use-session-storage))
- [LocalStorage Persistence](https://awesome-repositories.com/f/data-databases/state-persistence-layers/localstorage-persistence.md) — Synchronizes React state with the browser's localStorage to persist data across page refreshes.
- [Browser Storage Persistence](https://awesome-repositories.com/f/data-databases/state-persistence/browser-storage-persistence.md) — Synchronizes state with browser storage to maintain data persistence across page reloads. ([source](https://usehooks-ts.com/react-hook/use-local-storage))

### Programming Languages & Runtimes

- [Timer Lifecycle Managers](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/timer-schedulers/timer-lifecycle-managers.md) — Provides hooks that encapsulate timer IDs to ensure proper cleanup on component unmount.
- [Fixed Interval Repetitions](https://awesome-repositories.com/f/programming-languages-runtimes/effect-repetition-policies/fixed-interval-repetitions.md) — Provides a utility for executing callback functions repeatedly at a fixed time interval. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))

### Software Engineering & Architecture

- [Environment Guards](https://awesome-repositories.com/f/software-engineering-architecture/server-side-logic-frameworks/environment-guards.md) — Implements guards that check for the window object to prevent SSR errors during hydration.
- [UI](https://awesome-repositories.com/f/software-engineering-architecture/function-execution-engines/cleanup-hooks/ui.md) — Provides a hook that executes a specific function when a component is removed from the DOM. ([source](https://usehooks-ts.com/react-hook/use-unmount))
- [Execution Debouncing](https://awesome-repositories.com/f/software-engineering-architecture/function-execution-utilities/execution-debouncing.md) — Implements a utility that delays function execution until a specified period of inactivity has passed. ([source](https://usehooks-ts.com/react-hook/use-debounce-callback))
- [Memoization Hooks](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/caching-memoization/memoization-hooks.md) — Provides a hook to create stable function references for event handlers to optimize performance. ([source](https://usehooks-ts.com/react-hook/use-event-callback))

### User Interface & Experience

- [Browser Event Listeners](https://awesome-repositories.com/f/user-interface-experience/browser-event-listeners.md) — Provides hooks to attach and manage native browser event listeners within the React component lifecycle.
- [State Management Hooks](https://awesome-repositories.com/f/user-interface-experience/state-management-hooks.md) — Ships hooks for managing common UI state patterns such as numeric counters and boolean toggles.
- [UI Event Monitoring](https://awesome-repositories.com/f/user-interface-experience/ui-event-monitoring.md) — Tracks user interface interactions and visibility changes for DOM elements to trigger UI actions.
- [Preference Persistence](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-systems/preference-persistence.md) — Includes utilities for implementing and persisting light and dark mode preferences.
- [Outside Click Detectors](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/outside-click-detectors.md) — Provides a hook to detect clicks outside of a target element, useful for closing dropdowns or modals. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Layout Observation](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/layout-observation.md) — Employs the Resize Observer API to monitor element dimensions and trigger real-time layout updates.
- [Responsive Viewport Monitoring](https://awesome-repositories.com/f/user-interface-experience/responsive-viewport-monitoring.md) — Monitors media queries and viewport dimensions to adjust React components based on screen size.
- [Media Query Observers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/media-query-observers.md) — Provides a utility to subscribe to CSS media query changes for reactive UI updates. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Theme Management Systems](https://awesome-repositories.com/f/user-interface-experience/theme-management-systems.md) — Provides a system to manage and switch between light and dark visual themes based on user or system preferences. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Viewport Dimension Tracking](https://awesome-repositories.com/f/user-interface-experience/viewport-dimension-tracking.md) — Monitors the current width and height of the browser window to adjust layout on resize. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Element Dimension Tracking](https://awesome-repositories.com/f/user-interface-experience/viewport-dimension-tracking/element-dimension-tracking.md) — Monitors the width and height of specific HTML elements and triggers state updates upon change. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Tracks when elements enter or exit the viewport to trigger lazy loading or animations. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))
- [Callback Reference Memoization](https://awesome-repositories.com/f/user-interface-experience/virtual-rendering/rendering-optimizations/memoized-rendering/callback-reference-memoization.md) — Implements a pattern using useRef to maintain current callback references without triggering component updates.

### Development Tools & Productivity

- [State Counters](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/sequential-counters/atomic-counters/state-counters.md) — Ships a typed hook for managing numeric counters with increment, decrement, and reset functionality. ([source](https://usehooks-ts.com/react-hook/use-counter))
- [Clipboard Copying](https://awesome-repositories.com/f/development-tools-productivity/clipboard-management/clipboard-copying.md) — Implements functionality to write specified text strings to the system clipboard. ([source](https://cdn.jsdelivr.net/gh/juliencrn/usehooks-ts@master/README.md))

### Testing & Quality Assurance

- [React Performance Optimization](https://awesome-repositories.com/f/testing-quality-assurance/react-performance-optimization.md) — Reduces redundant processing and prevents memory leaks using mount status tracking and debouncing.