https://github.com/bboydflo/use-value-after

dead simple react hook to get the next value from an array after a specific delay
https://github.com/bboydflo/use-value-after

Last synced: about 1 month ago
JSON representation

dead simple react hook to get the next value from an array after a specific delay

• Host: GitHub
• URL: https://github.com/bboydflo/use-value-after
• Owner: bboydflo
• Created: 2019-10-04T13:26:38.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:11:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T17:39:40.571Z (about 1 month ago)
• Language: TypeScript
• Size: 355 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `useValueAfter`
• awesome-react-hooks-cn - `useValueAfter`
• awesome-react-hooks - `useValueAfter`
• awesome-react-hooks - `useValueAfter`

README

        
Welcome to use-value-after 👋



  

    

  

  

    

  

  

    

  



> react hook to use values from an array after delay. when reaching the end of the array it will start from the beginning

### 🏠 [Homepage](https://github.com/bboydflo/use-value-after)

## Install

```sh

npm install

```

## Usage

This hook comes in handy when testing edge cases for a React component by generating a new set of props after a specific delay

```js

import React from 'react'

import ReactDOM from 'react-dom'

import { useValueAfter } from 'use-value-after'

const TestComponent = (props) => {

  return (

    


      
{props.title}

      
{props.text}

    

  )

}


const updatePropsAfterMs = 1000

const testComponentProps = [

  {title: '', text: ''},

  {title: '', text: 'No title'},

  {title: 'Short title', text: ''},

  {title: 'Short title', text: 'Really small paragraph'}

]

const App = () => {

  const props = useValueAfter(testComponentProps, updatePropsAfterMs)

  return (

    


      

    

  )

}


ReactDOM.render(, document.getElementById('root'))

```

## CodeSandbox Demo

For a demo [take a look here](https://codesandbox.io/s/use-value-after-demo-ov7lz)

## Author

👤 **Florin Cosmin Onciu**

* Twitter: [@CosminOnciu](https://twitter.com/CosminOnciu)

* Github: [@bboydflo](https://github.com/bboydflo)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/bboydflo/use-value-after/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).

## Show your support

Give a ⭐️ if this project helped you!

***

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_