react-idled

    1.0.1 • Public • Published

    Travis build status Codecov branch npm downloads MIT License

    gzip size size

    Maintainability PRs Welcome

    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.

    Install

    npm i react-idled

    DownloadsWeekly Downloads

    446

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    54.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar