React-Hooks

A collection of React Hooks.

tl;dr

• Install by executing npm install @wojtekmaj/react-hooks or yarn add @wojtekmaj/react-hooks.
• Import by adding import { useTick } from '@wojtekmaj/react-hooks'.
• Do stuff with it!

  const tick = useTick();
  

Server-side rendering

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.

User guide

Table of contents

• useCurrentPosition
• useDebouncedEffect
• useDebouncedState
• useDebouncedValue
• useEventListener
• useIntersectionObserver
• useLocalStorage
• useMatchMedia
• useMutationObserver
• useOnLine
• usePermissionState
• usePrefersColorSchemeDark
• usePrefersColorSchemeLight
• usePrefersReducedMotion
• usePrefersReducedTransparency
• useResizeObserver
• useScrollLeft
• useScrollLeftPercent
• useScrollTop
• useScrollTopPercent
• useSetInterval
• useSetTimeout
• useTick
• useToggle
• useWindowHeight
• useWindowWidth

useCurrentPosition

Returns current position from Geolocation API.

Sample usage

import { useCurrentPosition } from '@wojtekmaj/react-hooks';

useCurrentPosition(); // { latitude: 0, longitude: 0 }

useDebouncedEffect

Runs a given effect after a given delay.

Sample usage

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.

Sample usage

import { useDebouncedState } from '@wojtekmaj/react-hooks';

const [value, setValue] = useDebouncedState('initialState', 1000); // ['initialState', Function]

useDebouncedValue

Returns a debounced value.

Sample usage

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.

Sample usage

import { useEventListener } from '@wojtekmaj/react-hooks';

useEventListener(element, 'click', onClick);

useIntersectionObserver

Observes a given element using IntersectionObserver.

Sample usage

import { useIntersectionObserver } from '@wojtekmaj/react-hooks';

useIntersectionObserver(element, config, onIntersectionChange);

useLocalStorage

Returns a stateful value synchronized with localStorage, and a function to update it.

Sample usage

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.

Sample usage

import { useMatchMedia } from '@wojtekmaj/react-hooks';

const isDesktop = useMatchMedia('screen and (min-width: 1024px)'); // true / false

useMutationObserver

Observes a given element using MutationObserver.

Sample usage

import { useMutationObserver } from '@wojtekmaj/react-hooks';

useMutationObserver(element, config, onMutation);

useOnLine

Returns the online status of the browser.

Sample usage

import { useOnLine } from '@wojtekmaj/react-hooks';

const onLine = useOnLine(); // true

usePermissionState

Returns permission state given permission name.

Sample usage

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.

Sample usage

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.

Sample usage

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.

Sample usage

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.

Sample usage

import { usePrefersReducedTransparency } from '@wojtekmaj/react-hooks';

const prefersReducedTransparency = usePrefersReducedTransparency(); // true

useResizeObserver

Observes a given element using ResizeObserver.

Sample usage

import { useResizeObserver } from '@wojtekmaj/react-hooks';

useResizeObserver(element, config, onResize);

useScrollLeft

Returns current scroll left position in pixels.

Sample usage

import { useScrollLeft } from '@wojtekmaj/react-hooks';

const scrollLeft = useScrollLeft(); // 0

useScrollLeftPercent

Returns current scroll left position in percentage.

Sample usage

import { useScrollLeftPercent } from '@wojtekmaj/react-hooks';

const scrollLeftPercent = useScrollLeftPercent(); // 0.5

useScrollTop

Returns current scroll top position in pixels.

Sample usage

import { useScrollTop } from '@wojtekmaj/react-hooks';

const scrollTop = useScrollTop(); // 0

useScrollTopPercent

Returns current scroll top position in percentage.

Sample usage

import { useScrollTopPercent } from '@wojtekmaj/react-hooks';

const scrollTopPercent = useScrollTopPercent(); // 0.5

useSetInterval

Runs a given function every n milliseconds.

Sample usage

import { useSetInterval } from '@wojtekmaj/react-hooks';

useSetInterval(fn, 1000);

useSetTimeout

Runs a given function after n milliseconds.

Sample usage

import { useSetTimeout } from '@wojtekmaj/react-hooks';

useSetTimeout(fn, 1000);

useTick

Counts from 0, increasing the number returned every n milliseconds.

Sample usage

import { useTick } from '@wojtekmaj/react-hooks';

const tick = useTick(1000); // 0 … 🕐 … 1 … 🕑 … 2 …

useToggle

Returns a flag and a function to toggle it.

Sample usage

import { useToggle } from '@wojtekmaj/react-hooks';

const [value, toggleValue] = useToggle(); // [false, Function]

useWindowHeight

Returns the interior height of the window in pixels.

Sample usage

import { useWindowHeight } from '@wojtekmaj/react-hooks';

const windowWidth = useWindowHeight(); // 900

useWindowWidth

Returns the interior width of the window in pixels.

Sample usage

import { useWindowWidth } from '@wojtekmaj/react-hooks';

const windowWidth = useWindowWidth(); // 1440

License

The MIT License.

Author

Wojciech Maj