react-timeout

React Timeout

A component wrapper providing safe-to-use-with-react versions of

Set	Clear
setTimeout	clearTimeout
setInterval	clearInterval
setImmediate	clearImmediate
requestAnimationFrame	cancelAnimationFrame

When the component is unmounted the wrapper calls the Clear functions for you.

Installation

npm install --save react-timeout

Usage

Import and apply ReactTimeout using composition

import ReactTimeout from 'react-timeout'

class Simple extends Component { .. }
const Timeoutable = ReactTimeout(Simple)

or an annotation (not recommended)

import ReactTimeout from 'react-timeout'

@ReactTimeout
class Timeoutable extends Component { .. }

Invoke a safe setTimeout from within the component.

const { setTimeout } = this.props.reactTimeout
const id = setTimeout(() => {
  console.log(`The callback with ${id} fired!`)
}, 5000)

The callback function will be cleared if the component unmounts before time elapses.

Example

A full example is available in example/src/example.js.

To run the example, clone the repository and run npm install && npm start in the example/ folder.

Inspiration

react-timer-mixin

The timer mixin recommended by the react-native README.md.

Mixins Are Dead. Long Live Composition

Dan Abramov's musing on why a project like this might be a good idea.