@wojtekmaj/react-hooks

    1.12.0 • Public • Published

    npm downloads CI tested with jest

    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 }

    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

    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

    useScrollTop

    Returns current scroll top position in pixels.

    Sample usage

    import { useScrollTop } from '@wojtekmaj/react-hooks';
    
    const scrollTop = useScrollTop(); // 0

    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
    kontakt@wojtekmaj.pl
    https://wojtekmaj.pl

    Keywords

    Install

    npm i @wojtekmaj/react-hooks

    DownloadsWeekly Downloads

    248

    Version

    1.12.0

    License

    MIT

    Unpacked Size

    81.3 kB

    Total Files

    87

    Last publish

    Collaborators

    • wojtekmaj