bboydflo / use-value-after

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

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

Install

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

import React from 'react'
import ReactDOM from 'react-dom'
import { useValueAfter } from 'use-value-after'

const TestComponent = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.text}</p>
    </div>
  )
}

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 (
    <div className='App'>
      <TestComponent {...props} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

CodeSandbox Demo

For a demo take a look here

Author

👤 Florin Cosmin Onciu

• Twitter: @CosminOnciu
• Github: @bboydflo

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator