A collection of React Hooks.
npm install @wojtekmaj/react-hooks
or yarn add @wojtekmaj/react-hooks
.import { useTick } from '@wojtekmaj/react-hooks'
.const tick = useTick();
All hooks from this package support SSR. Some hooks use browser-only APIs, e.g. useCurrentPosition
. Such hooks, if they are supposed to return a value, will return null
instead.
useCurrentPosition
useDebouncedEffect
useDebouncedState
useDebouncedValue
useEventListener
useIntersectionObserver
useLocalStorage
useMatchMedia
useMutationObserver
useOnLine
usePermissionState
usePrefersColorSchemeDark
usePrefersColorSchemeLight
usePrefersReducedMotion
usePrefersReducedTransparency
useResizeObserver
useScrollLeft
useScrollLeftDirection
useScrollLeftPercent
useScrollTop
useScrollTopDirection
useScrollTopPercent
useSessionStorage
useSetInterval
useSetTimeout
useTick
useToggle
useWindowHeight
useWindowWidth
useCurrentPosition
Returns current position from Geolocation API.
import { useCurrentPosition } from '@wojtekmaj/react-hooks';
useCurrentPosition(); // { latitude: 0, longitude: 0 }
useDebouncedEffect
Runs a given effect after a given delay.
import { useDebouncedEffect } from '@wojtekmaj/react-hooks';
useDebouncedEffect(
() => {
// This will run after 1 second of value not changing.
},
[value],
1000,
);
useDebouncedState
Returns a debounced state and a function to update it.
import { useDebouncedState } from '@wojtekmaj/react-hooks';
const [value, setValue] = useDebouncedState('initialState', 1000); // ['initialState', Function]
useDebouncedValue
Returns a debounced value.
import { useDebouncedValue } from '@wojtekmaj/react-hooks';
const debouncedValue = useDebouncedValue(value, 1000); // This value will be updated after 1 second of value not changing.
useEventListener
Adds event listener to a given element.
import { useEventListener } from '@wojtekmaj/react-hooks';
useEventListener(element, 'click', onClick);
useIntersectionObserver
Observes a given element using IntersectionObserver.
import { useIntersectionObserver } from '@wojtekmaj/react-hooks';
useIntersectionObserver(element, config, onIntersectionChange);
useLocalStorage
Returns a stateful value synchronized with localStorage, and a function to update it.
import { useLocalStorage } from '@wojtekmaj/react-hooks';
const [value, setValue] = useLocalStorage('myKey', 'initialState'); // ['initialState', Function]
useMatchMedia
Returns a flag which determines if the document matches the given media query string.
import { useMatchMedia } from '@wojtekmaj/react-hooks';
const isDesktop = useMatchMedia('screen and (min-width: 1024px)'); // true / false
useMutationObserver
Observes a given element using MutationObserver.
import { useMutationObserver } from '@wojtekmaj/react-hooks';
useMutationObserver(element, config, onMutation);
useOnLine
Returns the online status of the browser.
import { useOnLine } from '@wojtekmaj/react-hooks';
const onLine = useOnLine(); // true
usePermissionState
Returns permission state given permission name.
import { usePermissionState } from '@wojtekmaj/react-hooks';
const state = usePermissionState({ name: 'geolocation' }); // 'granted'
usePrefersColorSchemeDark
Returns a flag which determines if the document matches (prefers-color-scheme: dark)
media feature.
import { usePrefersColorSchemeDark } from '@wojtekmaj/react-hooks';
const prefersColorSchemeDark = usePrefersColorSchemeDark(); // true
usePrefersColorSchemeLight
Returns a flag which determines if the document matches (prefers-color-scheme: light)
media feature.
import { usePrefersColorSchemeLight } from '@wojtekmaj/react-hooks';
const prefersColorSchemeLight = usePrefersColorSchemeLight(); // true
usePrefersReducedMotion
Returns a flag which determines if the document matches (prefers-reduced-motion: reduce)
media feature.
import { usePrefersReducedMotion } from '@wojtekmaj/react-hooks';
const prefersReducedMotion = usePrefersReducedMotion(); // true
usePrefersReducedTransparency
Returns a flag which determines if the document matches (prefers-reduced-transparency: reduce)
media feature.
import { usePrefersReducedTransparency } from '@wojtekmaj/react-hooks';
const prefersReducedTransparency = usePrefersReducedTransparency(); // true
useResizeObserver
Observes a given element using ResizeObserver.
import { useResizeObserver } from '@wojtekmaj/react-hooks';
useResizeObserver(element, config, onResize);
useScrollLeft
Returns current scroll left position in pixels.
import { useScrollLeft } from '@wojtekmaj/react-hooks';
const scrollLeft = useScrollLeft(); // 0
useScrollLeftDirection
Returns current scroll left direction.
import { useScrollLeftDirection } from '@wojtekmaj/react-hooks';
const scrollLeftDirection = useScrollLeftDirection(); // 'still' / 'left' / 'right'
useScrollLeftPercent
Returns current scroll left position in percentage.
import { useScrollLeftPercent } from '@wojtekmaj/react-hooks';
const scrollLeftPercent = useScrollLeftPercent(); // 0.5
useScrollTop
Returns current scroll top position in pixels.
import { useScrollTop } from '@wojtekmaj/react-hooks';
const scrollTop = useScrollTop(); // 0
useScrollTopDirection
Returns current scroll top direction.
import { useScrollTopDirection } from '@wojtekmaj/react-hooks';
const scrollTopDirection = useScrollTopDirection(); // 'still' / 'up' / 'down'
useScrollTopPercent
Returns current scroll top position in percentage.
import { useScrollTopPercent } from '@wojtekmaj/react-hooks';
const scrollTopPercent = useScrollTopPercent(); // 0.5
useSessionStorage
Returns a stateful value synchronized with sessionStorage, and a function to update it.
import { useSessionStorage } from '@wojtekmaj/react-hooks';
const [value, setValue] = useSessionStorage('myKey', 'initialState'); // ['initialState', Function]
useSetInterval
Runs a given function every n milliseconds.
import { useSetInterval } from '@wojtekmaj/react-hooks';
useSetInterval(fn, 1000);
useSetTimeout
Runs a given function after n milliseconds.
import { useSetTimeout } from '@wojtekmaj/react-hooks';
useSetTimeout(fn, 1000);
useTick
Counts from 0, increasing the number returned every n milliseconds.
import { useTick } from '@wojtekmaj/react-hooks';
const tick = useTick(1000); // 0 β¦ π β¦ 1 β¦ π β¦ 2 β¦
useToggle
Returns a flag and a function to toggle it.
import { useToggle } from '@wojtekmaj/react-hooks';
const [value, toggleValue] = useToggle(); // [false, Function]
useWindowHeight
Returns the interior height of the window in pixels.
import { useWindowHeight } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowHeight(); // 900
useWindowWidth
Returns the interior width of the window in pixels.
import { useWindowWidth } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowWidth(); // 1440
The MIT License.