https://github.com/taystack/use-timeout

React 16.8 hook to perform timeouts with a boolean flag
https://github.com/taystack/use-timeout

Last synced: about 2 months ago
JSON representation

React 16.8 hook to perform timeouts with a boolean flag

• Host: GitHub
• URL: https://github.com/taystack/use-timeout
• Owner: taystack
• Created: 2020-02-15T01:54:52.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:19:32.000Z (almost 3 years ago)
• Last Synced: 2025-10-24T07:53:59.146Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://taystack.github.io/use-timeout
• Size: 2.85 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 41
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# @taystack/use-timeout

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

![UseTimeout](https://github.com/taystack/use-timeout/blob/master/logo.png?raw=true)

[![NPM](https://img.shields.io/npm/v/@taystack/use-timeout.svg)](https://www.npmjs.com/package/@taystack/use-timeout) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![codecov](https://codecov.io/gh/taystack/use-timeout/branch/master/graph/badge.svg)](https://codecov.io/gh/taystack/use-timeout)

## Install

```bash

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

```jsx

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 (

    
Shows gradually in 100 milliseconds

  );


}

```

## License

MIT © [taystack](https://github.com/taystack)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).