usehooks-ts
Advanced tools
The usehooks-ts package provides a collection of commonly used React hooks, making it easier to manage state, side effects, and other functionalities in React applications.
useLocalStorage
The useLocalStorage hook allows you to manage state that is synchronized with localStorage. This is useful for persisting state across page reloads.
import { useLocalStorage } from 'usehooks-ts';
function App() {
const [value, setValue] = useLocalStorage('key', 'default value');
return (
<div>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<p>{value}</p>
</div>
);
}useWindowSize
The useWindowSize hook provides the current width and height of the window, updating in real-time as the window is resized. This is useful for responsive design.
import { useWindowSize } from 'usehooks-ts';
function App() {
const { width, height } = useWindowSize();
return (
<div>
<p>Width: {width}</p>
<p>Height: {height}</p>
</div>
);
}useDebounce
The useDebounce hook delays updating the state until after a specified delay. This is useful for optimizing performance in scenarios like search input where you don't want to trigger a search on every keystroke.
import { useDebounce } from 'usehooks-ts';
import { useState } from 'react';
function App() {
const [value, setValue] = useState('');
const debouncedValue = useDebounce(value, 500);
return (
<div>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<p>Debounced Value: {debouncedValue}</p>
</div>
);
}The react-use package is a collection of essential React hooks. It offers a wide range of hooks for various use cases, including state management, side effects, and lifecycle events. Compared to usehooks-ts, react-use has a larger collection of hooks and is more widely adopted.
The ahooks package is a React hooks library developed by the Alibaba Group. It provides a comprehensive set of hooks for state management, side effects, and more. ahooks is known for its well-documented and high-quality hooks, making it a strong alternative to usehooks-ts.
The react-hooks-library package offers a set of reusable hooks for React applications. It focuses on providing hooks for common use cases like fetching data, managing forms, and handling events. While it has fewer hooks compared to usehooks-ts, it is still a valuable resource for React developers.
npm i usehooks-ts
useHooks(π₯).ts is a React hooks library, written in Typescript and easy to use. It provides a set of hooks that enables you to build your React applications faster. The hooks are built upon the principles of DRY (Don't Repeat Yourself). There are hooks for most common use cases you might need.
The library is designed to be as minimal as possible. It is fully tree-shakable (using the ESM version), meaning that you only import the hooks you need, and the rest will be removed from your bundle making the cost of using this library negligible. Most hooks are extensively tested and are being used in production environments.
import { useLocalStorage } from 'usehooks-ts'
function Component() {
const [value, setValue] = useLocalStorage('my-localStorage-key', 0)
// ...
}
useBoolean β handles boolean state with useful utility functions.useClickAnyWhere β handles click events anywhere on the document.useCopyToClipboard β copies text to the clipboard using the Clipboard API.useCountdown β manages countdown.useCounter β manages a counter with increment, decrement, reset, and setCount functionalities.useDarkMode β returns the current state of the dark mode.useDebounceCallback β creates a debounced version of a callback function.useDebounceValue β returns a debounced version of the provided value, along with a function to update it.useDocumentTitle β sets the document title.useEventCallback β creates a memoized event callback.useEventListener β attaches event listeners to DOM elements, the window, or media query lists.useHover β tracks whether a DOM element is being hovered over.useIntersectionObserver β tracks the intersection of a DOM element with its containing element or the viewport using the Intersection Observer API.useInterval β creates an interval that invokes a callback function at a specified delay using the setInterval API.useIsClient β determines if the code is running on the client side (in the browser).useIsMounted β determines if the component is currently mounted.useIsomorphicLayoutEffect β uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).useLocalStorage β uses the localStorage API to persist state across page reloads.useMap β manages a key-value Map state with setter actions.useMediaQuery β tracks the state of a media query using the Match Media API.useOnClickOutside β handles clicks outside a specified element.useReadLocalStorage β reads a value from localStorage, closely related to useLocalStorage().useResizeObserver β observes the size of an element using the ResizeObserver API.useScreen β tracks the screen dimensions and properties.useScript β dynamically loads scripts and tracking their loading status.useScrollLock β A custom hook that locks and unlocks scroll.useSessionStorage β uses the sessionStorage API to persist state across page reloads.useStep β manages and navigates between steps in a multi-step process.useTernaryDarkMode β manages ternary (system, dark, light) dark mode with local storage support.useTimeout β handles timeouts in React components using the setTimeout API.useToggle β manages a boolean toggle state in React components.useUnmount β runs a cleanup function when the component is unmounted.useWindowSize β tracks the size of the window.Big thanks go to all our backers! [Become a backer]
 Sentry |  KATT |  Adhi Ravishankar |  great-work-told-is |
Big thanks go to all our contributors! [Become a contributor]
This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!
If you find this piece of software helpful, please consider a donation. Any amount is greatly appreciated.
BTC: bc1qwys40tnd0lxf9lr9l0t6xc63dpxyucj4x4nay0
ETH: 0x36a85155a8300754C56395D5af24553FB18915D6
This project is MIT licensed.
FAQs
React hook library, ready to use, written in Typescript.
We found that usehooks-ts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
