Necessitates Proper Modularity

    microhooks
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    microhooks

    A tiny collection of useful React Hooks.

    Install

    yarn add microhooks
    

    API

    useDeferredState

    Function as useState but will be deferred for the specific amount of time to avoid excessing API limit.

    import { useDeferredState } from 'microhooks';
     
    const Form: React.FC = () => {
      const [query, setQuery] = useDeferredState(500, 'Initial value');
     
      useEffect(() => {
        fetch(`https://example.com/api?query=${query}`)
          .then(response => response.json())
          .then(json => {
            console.log(json);
          });
      }, [query]);
     
      function handleInput(e) {
        setQuery(e.value);
      }
     
      return <input onChange={handleInput} />;
    };

    useTakeEffect

    Unlike useEffect, useTakeEffect will be called when all of the given props are neither undefined nor null.

    import { useTakeEffect } from 'microhooks';
     
    const App: React.FC = () => {
      const ref = useRef<HTMLDivElement>(null);
     
      useTakeEffect(() => {
        ref.current.innerHTML = 'hey';
      }, [ref.current]);
     
      return <div ref={ref} />;
    };

    usePrefetch

    Prefetch any kind of media for the cache.

    import { usePrefetch } from 'microhooks';
     
    const App: React.FC = () => {
      usePrefetch({
        logo: './assets/logo.png',
        bg: './assets/background.png',
      });
    };

    useWindowBounds

    Obtain width and height of a browser window and keep updating them.

    import { useWindowBounds } from 'microhooks';
     
    const App: React.FC = () => {
      const { width, height } = useWindowBounds();
     
      return <canvas width={width} height={height} />;
    };

    useInlineSVG

    Thanks to the power of webpack, useInlineSVG can be used as a SVG container factory.

    import { useInlineSVG } from 'microhooks';
     
    import LogoSVG from './assets/logo.svg';
     
    const App: React.FC = () => {
      const Logo = useInlineSVG(LogoSVG);
     
      return (
        <>
          <Logo />
          <p>Heyyy</p>
        </>
      );
    };

    Keywords

    Install

    npm i microhooks

    DownloadsWeekly Downloads

    1

    Version

    0.1.3

    License

    Apache-2.0

    Unpacked Size

    22.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • uetchy