https://usehooks.com as an npm package with TypeScript type definitions.

npm install use-hooks

yarn add use-hooks

• useAnimation* (demo)
• useDarkMode* (demo)
• useDebounce (demo)
• useEventListener (demo)
• useHistory* (demo)
• useHover (demo)
• useKeyPress* (demo)
• useLocalStorage (demo)
• useLockBodyScroll (demo)
• useMedia* (demo)
• useOnClickOutside (demo)
• useOnScreen* (demo)
• usePrevious (demo)
• useScript* (demo)
• useTheme (demo)
• useWhyDidYouUpdate (demo)
• useWindowSize* (demo)

Hooks marked with "*" have minor differences (read below).

To supply a custom easing function just pass it as a first argument:

import { useAnimation } from 'use-hooks'

const inQuart = (t) => t * t * t * t
function MyComponent() {
	const animation = useAnimation(inQuart, 250)

	// ...
}

The class name and element are hard coded on the website but in this package they're changable:

import { useDarkMode } from 'use-hooks'

const rootElement = document.getElementById('my-root-element')
function App() {
	useDarkMode('my-dark-mode-class-name', rootElement)

	// ...
}

Added initialValue to the clear callbacks dependencies.

A second useDependencies argument was added allowing the effect to re-run when arguments change.

A fourth useDependencies argument was added allowing the effect to re-run when arguments change.

A third useDependencies argument was added allowing the effect to re-run when arguments change.

Converted an Array.prototype.includes call to an Array.prototype.indexOf call to support ES5 environments.

isClient boolean and getSize function moved out of hook body.

Thanks to @gabe_ragland for creating and maintaining https://usehooks.com

Thanks to @turbobabr for donating use-hooks package name