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.