Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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
useBoolean()
useClickAnyWhere()
useCopyToClipboard()
useCountdown()
useCounter()
useDarkMode()
useDebounce()
useDocumentTitle()
useEffectOnce()
useElementSize()
useEventListener()
useFetch()
useHover()
useImageOnLoad()
useIntersectionObserver()
useInterval()
useIsClient()
useIsFirstRender()
useIsMounted()
useIsomorphicLayoutEffect()
useLocalStorage()
useLockedBody()
useMap()
useMediaQuery()
useOnClickOutside()
useReadLocalStorage()
useScreen()
useScript()
useSessionStorage()
useSsr()
useStep()
useTernaryDarkMode()
useTimeout()
useToggle()
useUpdateEffect()
useWindowSize()
Thanks for wanting to contribute! It's more than welcome π€
Most content changes (like fixing a typo) can be made without cloning the repository. Simply locate the file you wish to change in the GitHub UI, and click the little edit icon to make your change directly on the GitHub website.
If you need to make any other substantial changes, then follow the project setup steps below.
Before starting, make sure you have the good system dependencies:
node@16.x
npm@^8
Note: To easily switch node version, consider Node Version Manager (nvm).
Then fork the repository, clone it and install.
git clone https://github.com/{your_username}/usehooks-ts.git
cd usehooks-ts
npm install
# This command generates boilerplate for new hooks.
# Skip if updating an existed hook.
npm run plop
# Then develop the hook (aka test:watch)
npm run dev
# Once the hooks is ready
# Launch the documentation website
# Note: to build the website, you have to compile the usehooks-ts lib
# first, which create website content in the `website/generated` folder,
# used by Gatsby to create pages
cd website
npm install
npm run start
# Before commit: exec types-checking, linters and tests
cd ..
npm run test
π ./src
βββ π useHookName
β βββ π useHookName.demo.tsx # working demo
β βββ π useHookName.mdx # the documentation content
β βββ π§ͺ useHookName.test.ts # unit tests
β βββ π useHookName.ts # the hook
...
When the usehooks-ts
is compiled, only the necessary files are used.
The other files are copied in the documentation website.
Note: The demo is used different way:
Big thanks goes to these wonderful people β€οΈ
This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!
This project is MIT licensed.
FAQs
React hook library, ready to use, written in Typescript.
The npm package usehooks-ts receives a total of 752,538 weekly downloads. As such, usehooks-ts popularity was classified as popular.
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.