use-hooks

use-hooks

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

Installation

npm install use-hooks

yarn add use-hooks

Available 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).

Differences

useAnimation

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)

	// ...
}

useDarkMode

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)

	// ...
}

useHistory

Added initialValue to the clear callbacks dependencies.

useKeyPress

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

useMedia

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

useOnScreen

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

useScript

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

useWindowSize

isClient boolean and getSize function moved out of hook body.

Credits

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

Thanks to @turbobabr for donating use-hooks package name