react-idled 😴

A React component that notifies you when the user is idle.

Getting started

npm install --save react-idled

Why?

This is a copy of react-idle.

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

API

Props	Description	Default
defaultIdle	(Boolean) Does component start of as idle? By default, we assume that loading the page is a user interaction.	false
render	(Function) A render prop function	() => {}
onChange	(Function) Called whenever the user's idle state changes.	() => {}
timeout	(Number) The time it takes for the user to be idle, in milliseconds	1000
events	(Array) An array of window events to listen for user activity	[ "mousemove", "mousedown", "keydown", "touchstart", "scroll" ]

render function

The render prop is a function that is called with the following arguments.

Name	Description
idle	A boolean that tells you if the user is idle

onChange function

The onChange prop is a function that is called with the following arguments.

Name	Description
idle	A boolean that tells you if the user is idle

import React from "react";
import Idled from "react-idle";
 
class App extends React.Component {
  handleChange = ({ idle }) => {
    console.log("Is user idle?", idle);
  };
 
  render() {
    return (
      <Idled
        onChange={this.handleChange}
        timeout={1500}
        render={({ idle }) => <h1>{idle ? "*whistles*" : "Woah what now?"}</h1>}
      />
    );
  }
}

Demo

See CodeSandbox for demo.