wojtekmaj.pl / react-hooks
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-hooks. A collection of React Hooks.
hooks react react-hooks
Star
Fork 0
Watch
TypeScript 100%
JavaScript <1%
<1%
372 5 40
.github
.husky
.vscode
.yarn
src
.gitattributes
.gitignore
.yarnrc.yml
biome.json
LICENSE
package.json
README.md
test-utils.tsx
tsconfig.build.json
tsconfig.json
vitest.config.ts
vitest.setup.ts
yarn.lock
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