react-idle-timer's Introduction

React Idle Timer

React.js port of jQuery.idleTimer with some extras.

🚀 Now with Babel 6 and react-transform support

Installation

npm install react-idle-timer

Usage

check the examples directory for a working example

import React from 'react'
import IdleTimer from 'react-idle-timer';

class YourApp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <IdleTimer
        ref="idleTimer"
        element={document}
        activeAction={this._onActive}
        idleAction={this._onIdle}
        timeout={this.state.timeout}
        format="MM-DD-YYYY HH:MM:ss.SSS">

        <h1>All your children</h1>

      </IdleTimer>
    )
  }
}
module.exports = YourApp

Documentation

Props

timeout {Number} - Idle timeout in milliseconds
events {Array} - Events to bind
idleAction {Function} - Function to call on idle
activeAction {Function} - Function to call on active
element {Object} - Defaults to document, may pass a ref to another element
format {String} - moment.js format string applied to lastActiveTime
startOnLoad {Boolean} - Start the timer on component load. Defaults to true. Set to false to wait for user action before starting timer.

Methods

reset() {Void} - Resets the idleTimer
pause() {Void} - Pauses the idleTimer
resume() {Void} - Resumes a paused idleTimer
getRemainingTime() {Number} - Returns the remaining time in milliseconds
getElapsedTime() {Number} - Returns the elapsed time in milliseconds
lastActiveTime() {String} - Returns the last active time as a number or a formatted string if the format prop is defined
isIdle() {Boolean} - Returns whether or not user is idle

Recommend Projects