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