microhooks's Introduction

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>
    </>
  );
};