1.0.1 • Published 6 years ago
react-idled v1.0.1
react-idled 😴
A React component that notifies you when the user is idle.
Getting started
npm install --save react-idledWhy?
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>}
/>
);
}
}