react-idle

    3.0.0 • Public • Published

    React Idle

    logo

    What?

    Notifies your app when the user is idle.

    Why?

    When the user is idle you can do things like preload some code-split bundles, download images that haven't been scrolled to, etc. Also useful to automatically log them out of a sensitive website.

    Installation

    npm install react-idle
    # or 
    yarn add react-idle

    And then import it:

    // using es modules
    import Idle from 'react-idle'
     
    // common.js
    const Idle = require('react-idle').default
     
    // AMD
    // I've forgotten but it should work.

    Or use script tags and globals.

    <script src="https://unpkg.com/react-idle"></script>

    And then grab it off the global like so:

    const Idle = ReactIdle.default

    How?

    // import { Idle } from 'react-idle'
    const { default: Idle } = ReactIdle
     
    ReactDOM.render((
      <Idle
        onChange={({ idle }) => console.log({ idle })}
        render={({ idle }) =>
          <h1>
            {idle
              ? "You are idle."
              : "Stop doing stuff for 1 second."
            }
          </h1>
        }
      />
    ), DOM_NODE)

    Props

    render

    Whatever you'd like to render in response to changes in user activity.

    // import { Idle } from 'react-idle'
    const { default: Idle } = ReactIdle
     
    ReactDOM.render((
      <Idle render={({ idle }) =>
        <h1>
          {idle
            ? "*whistles*"
            : "Woah what now?"
          }
        </h1>
      }/>
    ), DOM_NODE)

    timeout

    How long before notifying that the user is idle in milliseconds.

    // import { Idle } from 'react-idle'
    const { default: Idle } = ReactIdle
     
    ReactDOM.render((
      <Idle
        timeout={2000}
        render={({ idle }) =>
          <h1>
            {idle
              ? "You are idle."
              : "Stop doing stuff for 2 seconds."
            }
          </h1>
        }
      />
    ), DOM_NODE)

    onChange

    Called whenever the user's activity state changes, a great time to change the owner component's state, or to kick off some imperative work like pre-fetching code-split bundles or images.

    // import { Idle } from 'react-idle'
    const { default: Idle } = ReactIdle
     
    class App extends React.Component {
      state = {
        cornifyLoaded: false
      }
     
      preloadCornify = () => {
        const script = document.createElement('script')
        script.onload = () => this.setState({ cornifyLoaded: true })
        script.src = '//www.cornify.com/js/cornify.js'
        document.body.appendChild(script)
      }
     
      cornify = () => {
        window.cornify_add()
      }
     
      render() {
        return (
          <div>
            {this.state.cornifyLoaded === false && (
              <Idle onChange={({ idle}) => {
                if (idle) {
                  this.preloadCornify()
                }
              }}/>
            )}
     
            <button
              disabled={!this.state.cornifyLoaded}
              onClick={this.cornify}
            >Make Some Happiness</button>
          </div>
        )
      }
    }
     
    ReactDOM.render(<App/>, DOM_NODE)

    events

    The window events to listen for activity, defaults to [ "mousemove", "mousedown", "keydown", "touchstart", "scroll" ].

    defaultIdle

    You can start out as idle by passing <Idle defaultIdle={true}/>, by default it is false--assumes that loading the page initially is a user interation.

    Legal

    Released under MIT license.

    Copyright © 2017-present React Training LLC

    Install

    npm i react-idle

    DownloadsWeekly Downloads

    2,094

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • ryanflorence