Nonchalant Programming Master

    react-interval
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    react-interval npm

    Safe React wrapper for setInterval

    Gitter Dependencies Dev Dependencies

    Installation

    NPM

    npm install --save react react-interval

    Don't forget to manually install peer dependencies (react) if you use npm@3.

    1998 Script Tag:

    <script src="https://unpkg.com/react/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-interval/build/react-interval.min.js"></script>
    (Module exposed as `ReactInterval`)

    Demo

    http://nkbt.github.io/react-interval

    Codepen demo

    http://codepen.io/nkbt/pen/ZGmpoO

    Usage

    Quickstart

    Start counting on render

    import ReactInterval from 'react-interval';
    
    const App = React.createClass({
      getInitialState() {
        return {count: 0};
      },
    
      render() {
        const {count} = this.state;
    
        return (
          <div>
            {count}
            <ReactInterval timeout={1000} enabled={true}
              callback={() => this.setState({count: this.state.count + 1})} />
          </div>
        );
      }
    });

    Full example

    Change timeout on the fly, start and stop counting

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ReactInterval from 'react-interval';
    
    const App = React.createClass({
      getInitialState() {
        return {
          enabled: false,
          timeout: 1000,
          count: 0
        };
      },
    
      render() {
        const {timeout, enabled, count} = this.state;
    
        return (
          <div>
            <ReactInterval {...{timeout, enabled}}
              callback={() => this.setState({count: this.state.count + 1})} />
    
            <input type="number" step="200" min="200" max="5000" value={this.state.timeout}
              onChange={({target: {value}}) => this.setState({timeout: parseInt(value, 10)})} />&nbsp;
    
            <button disabled={enabled} onClick={() => this.setState({enabled: true})}>
              Start</button>&nbsp;
    
            <button disabled={!enabled} onClick={() => this.setState({enabled: false})}>
              Stop</button>&nbsp;
    
            {count}
          </div>
        );
      }
    });
    
    const appRoot = document.createElement('div');
    document.body.appendChild(appRoot);
    ReactDOM.render(<App />, appRoot);

    Options

    callback: PropTypes.func.isRequired

    Function repeatedly called after timeout

    enabled: PropTypes.bool (default: false)

    Should start timer?

    timeout: PropTypes.number (default: 1000)

    Timeout before each callback call

    License

    MIT

    Install

    npm i react-interval

    DownloadsWeekly Downloads

    6,137

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • nkbt