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();
useDebouncedEffect
Runs a given effect after a given delay.
Sample usage
import { useDebouncedEffect } from '@wojtekmaj/react-hooks';
useDebouncedEffect(
() => {
},
[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);
useDebouncedValue
Returns a debounced value.
Sample usage
import { useDebouncedValue } from '@wojtekmaj/react-hooks';
const debouncedValue = useDebouncedValue(value, 1000);
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');
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)');
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();
usePermissionState
Returns permission state given permission name.
Sample usage
import { usePermissionState } from '@wojtekmaj/react-hooks';
const state = usePermissionState({ name: 'geolocation' });
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();
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();
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();
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();
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();
useScrollLeftPercent
Returns current scroll left position in percentage.
Sample usage
import { useScrollLeftPercent } from '@wojtekmaj/react-hooks';
const scrollLeftPercent = useScrollLeftPercent();
useScrollTop
Returns current scroll top position in pixels.
Sample usage
import { useScrollTop } from '@wojtekmaj/react-hooks';
const scrollTop = useScrollTop();
useScrollTopPercent
Returns current scroll top position in percentage.
Sample usage
import { useScrollTopPercent } from '@wojtekmaj/react-hooks';
const scrollTopPercent = useScrollTopPercent();
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);
useToggle
Returns a flag and a function to toggle it.
Sample usage
import { useToggle } from '@wojtekmaj/react-hooks';
const [value, toggleValue] = useToggle();
useWindowHeight
Returns the interior height of the window in pixels.
Sample usage
import { useWindowHeight } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowHeight();
useWindowWidth
Returns the interior width of the window in pixels.
Sample usage
import { useWindowWidth } from '@wojtekmaj/react-hooks';
const windowWidth = useWindowWidth();
License
The MIT License.
Author