@taystack/use-timeout

Get a boolean value after an arbitrary timeout. Useful for rendering mounting components.

Install

yarn add @taystack/use-timeout

Usage

The most basic use case here was to provide a hook for a loaded component. In the example below, will appear gradually. Any time Example.props.show changes, we reset the timeout for the next time

import React from "react";

import useTimeout from "@taystack/use-timeout";


const Example = ({ show }) => {

  const [isDone, startTimeout, onUnmount] = useTransitionTimeout(100, show);
  // [false, fn, fn];
  // 100ms later
  // [true, fn, fn];

  const styles = {
    opacity: show ? isDone ? 1 : 0 : 0,
    transition: "opacity 150ms",
  };

  return (
    <div style={style}>Shows gradually in 100 milliseconds</div>
  );

}

License

MIT © taystack

This hook is created using create-react-hook.