stop only stop the previous callback !!!
then the next callback wiil go agin!

start 1
stop 1
start 2
stop 2

it will nerver stop!

It seems like the click handler doesn't get triggered when one of the swapHandlers has more HTML tags inside of it.

Example

Another useful formulation of this component would be to be able to re-render children every x seconds.

e.g.

<ReactInterval timeout={3000}>
    {() => {moment(last_updated).fromNow() || '--'}}
</ReactInterval>

import PropTypes from 'prop-types';

should be used, current implementation will no longer work with new react.

Would you please release new version?
Because I want to use #131 .

It seems like if you try to change the timeout on the fly, It causes a significant CPU spike on less powerful CPUs. I was wondering if this can be mitigated or if you had any specific directions or insights on this. Thanks again for the great work on the library. :)

if the timeout is set to 60000 and I render the component a moment later with a timeout of 1000, the callback still doesn't get called until the original 60000 ms is up. Looking at the code it only resets the timer if enabled changes. I'm not sure if this is desirable behavior for any use cases, but it's not for mine, so it would be nice to at least have an option to reset when the timeout changes.

The documentation indicates the import is:

import ReactInterval from 'react-interval';

The code and testing indicates it should be:

import {ReactInterval} from 'react-interval';

It would be cool if ReactInterval could optionally run the callback on mount as well.

• Update all libs to use ES6 classes
• Use prop-types library instead of deprecated React.PropTypes
• Switch to React.PureComponent
• Drop support for React < 15.3

Hi,

I used the component for a very simple task: count x seconds before stopping the interval.
Surprisingly, the interval never stopped.

Here a sample code

import ReactInterval from 'react-interval';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { remaining: 5 };
    this.onTick = this.onTick.bind(this);
  }

  onTick() {
    const { remaining } = this.state;
    this.setState({ remaining: remaining - 1 });
  }

  render() {
    const { remaining } = this.state;
    return (
      <div>
        <ReactInterval
          enabled={remaining > 0}
          callback={this.onTick}
        />
        <span>{remaining}</span>
      </div>
    );
  }
}

export default Demo;

I found out that stop() was correctly called when enabled switched from true to false, but start() was then immediately called as well.

The issue is kind of related to the life-cycle of the component. For instance, if I use a setTimeout to delay the state change a bit, everything works. But if the enabled prop is switched to false "during" the callback, start() will be called anyway and the interval will not stop.

The culprit is probably this bit:

  callback = () => {
    if (this.timer) {
      this.props.callback();
      this.start();
    }
  };

It should be easily fixed by checking the enabled prop before calling start().