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.
useForcedColorsuseMatchMediausePrefersColorSchemeusePrefersColorSchemeDarkusePrefersColorSchemeLightusePrefersContrastusePrefersReducedMotionusePrefersReducedTransparency
useScrollLeftuseScrollLeftDirectionuseScrollLeftPercentuseScrollTopuseScrollTopDirectionuseScrollTopPercentuseWindowHeightuseWindowSizeuseWindowWidth
Returns current position from Geolocation API.
import { useCurrentPosition } from '@wojtekmaj/react-hooks';
useCurrentPosition(); // { latitude: 0, longitude: 0 }Returns the device's current physical orientation.
On iOS and iPadOS, permission to access device orientation must be requested from a user interaction before orientation events are emitted. If DeviceOrientationEvent.requestPermission() is available, call it from a click or tap handler.
import { useDeviceOrientation } from '@wojtekmaj/react-hooks';
const orientation = useDeviceOrientation(); // { absolute: false, alpha: 0, beta: 0, gamma: 0 }Returns the document's current visibility state.
import { useDocumentVisibility } from '@wojtekmaj/react-hooks';
const visibilityState = useDocumentVisibility(); // 'visible' / 'hidden'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'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);Observes a given element using MutationObserver.
import { useMutationObserver } from '@wojtekmaj/react-hooks';
useMutationObserver(element, config, onMutation);Observes a given element using ResizeObserver.
import { useResizeObserver } from '@wojtekmaj/react-hooks';
useResizeObserver(element, config, onResize);Returns a flag indicating whether the forced-colors media feature is active.
import { useForcedColors } from '@wojtekmaj/react-hooks';
const forcedColors = useForcedColors(); // trueReturns 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 / falseReturns the color scheme preference indicated by the prefers-color-scheme media feature.
import { usePrefersColorScheme } from '@wojtekmaj/react-hooks';
const prefersColorScheme = usePrefersColorScheme(); // 'dark' / 'light'Returns a flag indicating whether the prefers-color-scheme media feature is dark.
import { usePrefersColorSchemeDark } from '@wojtekmaj/react-hooks';
const prefersColorSchemeDark = usePrefersColorSchemeDark(); // trueReturns a flag indicating whether the prefers-color-scheme media feature is light.
import { usePrefersColorSchemeLight } from '@wojtekmaj/react-hooks';
const prefersColorSchemeLight = usePrefersColorSchemeLight(); // trueReturns the contrast preference indicated by the prefers-contrast media feature.
import { usePrefersContrast } from '@wojtekmaj/react-hooks';
const prefersContrast = usePrefersContrast(); // 'more' / 'less' / 'custom' / 'no-preference'Returns a flag indicating whether the prefers-reduced-motion media feature is reduce.
import { usePrefersReducedMotion } from '@wojtekmaj/react-hooks';
const prefersReducedMotion = usePrefersReducedMotion(); // trueReturns a flag indicating whether the prefers-reduced-transparency media feature is reduce.
import { usePrefersReducedTransparency } from '@wojtekmaj/react-hooks';
const prefersReducedTransparency = usePrefersReducedTransparency(); // trueReturns 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.5Returns the interior height of the window in pixels.
import { useWindowHeight } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowHeight(); // 900Returns the interior width and height of the window in pixels.
import { useWindowSize } from '@wojtekmaj/react-hooks';
const windowSize = useWindowSize(); // { width: 1440, height: 900 }Returns the interior width of the window in pixels.
import { useWindowWidth } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowWidth(); // 1440Returns 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.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 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]Returns a flag and a function to toggle it.
import { useToggle } from '@wojtekmaj/react-hooks';
const [value, toggleValue] = useToggle(); // [false, Function]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,
);Runs 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 …The MIT License.
|
Wojciech Maj |