A collection of React Hooks.
- Install by executing
npm install @wojtekmaj/react-hooksoryarn add @wojtekmaj/react-hooks. - Import by adding
import { useTick } from '@wojtekmaj/react-hooks'. - Do stuff with it!
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.
useCurrentPositionuseDebouncedEffectuseDebouncedStateuseDebouncedValueuseEventListeneruseIntersectionObserveruseLocalStorageuseMatchMediauseMutationObserveruseOnLineusePermissionStateusePrefersColorSchemeDarkusePrefersColorSchemeLightusePrefersReducedMotionusePrefersReducedTransparencyuseResizeObserveruseScrollLeftuseScrollLeftDirectionuseScrollLeftPercentuseScrollTopuseScrollTopDirectionuseScrollTopPercentuseSetIntervaluseSetTimeoutuseTickuseToggleuseWindowHeightuseWindowWidth
Returns current position from Geolocation API.
import { useCurrentPosition } from '@wojtekmaj/react-hooks';
useCurrentPosition(); // { latitude: 0, longitude: 0 }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,
);Returns a debounced state and a function to update it.
import { useDebouncedState } from '@wojtekmaj/react-hooks';
const [value, setValue] = useDebouncedState('initialState', 1000); // ['initialState', Function]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.Adds event listener to a given element.
import { useEventListener } from '@wojtekmaj/react-hooks';
useEventListener(element, 'click', onClick);Observes a given element using IntersectionObserver.
import { useIntersectionObserver } from '@wojtekmaj/react-hooks';
useIntersectionObserver(element, config, onIntersectionChange);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]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 / falseObserves a given element using MutationObserver.
import { useMutationObserver } from '@wojtekmaj/react-hooks';
useMutationObserver(element, config, onMutation);Returns the online status of the browser.
import { useOnLine } from '@wojtekmaj/react-hooks';
const onLine = useOnLine(); // trueReturns permission state given permission name.
import { usePermissionState } from '@wojtekmaj/react-hooks';
const state = usePermissionState({ name: 'geolocation' }); // 'granted'Returns a flag which determines if the document matches (prefers-color-scheme: dark) media feature.
import { usePrefersColorSchemeDark } from '@wojtekmaj/react-hooks';
const prefersColorSchemeDark = usePrefersColorSchemeDark(); // trueReturns a flag which determines if the document matches (prefers-color-scheme: light) media feature.
import { usePrefersColorSchemeLight } from '@wojtekmaj/react-hooks';
const prefersColorSchemeLight = usePrefersColorSchemeLight(); // trueReturns a flag which determines if the document matches (prefers-reduced-motion: reduce) media feature.
import { usePrefersReducedMotion } from '@wojtekmaj/react-hooks';
const prefersReducedMotion = usePrefersReducedMotion(); // trueReturns a flag which determines if the document matches (prefers-reduced-transparency: reduce) media feature.
import { usePrefersReducedTransparency } from '@wojtekmaj/react-hooks';
const prefersReducedTransparency = usePrefersReducedTransparency(); // trueObserves a given element using ResizeObserver.
import { useResizeObserver } from '@wojtekmaj/react-hooks';
useResizeObserver(element, config, onResize);Returns current scroll left position in pixels.
import { useScrollLeft } from '@wojtekmaj/react-hooks';
const scrollLeft = useScrollLeft(); // 0Returns current scroll left direction.
import { useScrollLeftDirection } from '@wojtekmaj/react-hooks';
const scrollLeftDirection = useScrollLeftDirection(); // 'still' / 'left' / 'right'Returns current scroll left position in percentage.
import { useScrollLeftPercent } from '@wojtekmaj/react-hooks';
const scrollLeftPercent = useScrollLeftPercent(); // 0.5Returns current scroll top position in pixels.
import { useScrollTop } from '@wojtekmaj/react-hooks';
const scrollTop = useScrollTop(); // 0Returns current scroll top direction.
import { useScrollTopDirection } from '@wojtekmaj/react-hooks';
const scrollTopDirection = useScrollTopDirection(); // 'still' / 'up' / 'down'Returns current scroll top position in percentage.
import { useScrollTopPercent } from '@wojtekmaj/react-hooks';
const scrollTopPercent = useScrollTopPercent(); // 0.5Runs a given function every n milliseconds.
import { useSetInterval } from '@wojtekmaj/react-hooks';
useSetInterval(fn, 1000);Runs a given function after n milliseconds.
import { useSetTimeout } from '@wojtekmaj/react-hooks';
useSetTimeout(fn, 1000);Counts from 0, increasing the number returned every n milliseconds.
import { useTick } from '@wojtekmaj/react-hooks';
const tick = useTick(1000); // 0 … 🕐 … 1 … 🕑 … 2 …Returns a flag and a function to toggle it.
import { useToggle } from '@wojtekmaj/react-hooks';
const [value, toggleValue] = useToggle(); // [false, Function]Returns the interior height of the window in pixels.
import { useWindowHeight } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowHeight(); // 900Returns the interior width of the window in pixels.
import { useWindowWidth } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowWidth(); // 1440The MIT License.
|
Wojciech Maj |