wojtekmaj.pl / react-hooks
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-hooks. A collection of React Hooks.
hooks react react-hooks
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

341 4 39

Clone this repository

https://git.vm.fail/wojtekmaj.pl/react-hooks https://git.vm.fail/did:plc:odjkvlgoaj6ndovskh6yws5z
ssh://git@knot1.tangled.sh:2222/wojtekmaj.pl/react-hooks ssh://git@knot1.tangled.sh:2222/did:plc:odjkvlgoaj6ndovskh6yws5z

For self-hosted knots, clone URLs may differ based on your setup.


Download tar.gz Download .zip
README.md

npm downloads CI

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#

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

useScrollLeftDirection#

Returns current scroll left direction.

Sample usage#

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

const scrollLeftDirection = useScrollLeftDirection(); // 'still' / 'left' / 'right'

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

useScrollTopDirection#

Returns current scroll top direction.

Sample usage#

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

const scrollTopDirection = useScrollTopDirection(); // 'still' / 'up' / 'down'

useScrollTopPercent#

Returns current scroll top position in percentage.

Sample usage#

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.

Sample usage#

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

const [value, setValue] = useSessionStorage('myKey', 'initialState'); // ['initialState', Function]

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 Wojciech Maj