@tanguymichardiere/hooks v0.1.6

A lightweight personal collection of React hooks, with only one dependency: React.

Installation

npm install @tanguymichardiere/hooks
yarn add @tanguymichardiere/hooks

Usage

Modals

Push and pop modals to and from the screen (like a stack).

Make sure to wrap any component that will push modals (typically your entire app) in a ModalProvider:

export default function App() {
  return <ModalProvider>{/* your app */}</ModalProvider>;
}

const modals = useModals();
return (
  <button
    onClick={function () {
      modals.push(
        <div>
          <h2>Modal</h2>
          <button onClick={modals.pop}>Close modal</button>
        </div>
      );
    }}
  >
    Show modal
  </button>
);

Storage

Store persistent data with a wrapper around useState.

const [auth, setAuth, authError] = useStorage<{ userName: string }>(
  localStorage,
  "auth"
);
if (authError !== undefined) {
  return <div>Error</div>;
} else if (auth !== null) {
  return <App />;
} else {
  return <LoginPage />;
}

You can use this hook multiple times with the same key, the states will be synchronized.

Matrix

Render a Matrix-like rain of green characters on a black background in a canvas.

const matrix = useMatrix();
return <canvas ref={matrix} />;

Interval

const [count, setCount] = useState(0);
useInterval(function () {
  setCount((count) => count + 1);
}, 1000);
return <div>{count}</div>;

The interval can be dynamic too:

const [ms, setMs] = useState(1000);
useInterval(function () {
  setMs((ms) => ms * 2);
}, ms);
return <div>{ms}</div>;

Toggle

const [showMenu, toggleShowMenu] = useToggle();
return (
  <>
    <button onClick={toggleShowMenu}>Menu</button>
    {showMenu && <Menu />}
  </>
);

TextInput

const name = useTextInput();
return <input type="text" {...name} />;

Checkbox

const checkbox = useCheckbox();
return <input type="checkbox" {...checkbox} />;