react-idled
Version:
A React component that notifies you when the user is idle.
95 lines (72 loc) • 4.64 kB
Markdown
[![Travis build status][travis-badge]][travis-build]
[![Codecov branch][codecov-badge]][codecov]
[![npm][npm-badge]][npm-version]
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][license]
[![gzip size][gzip-badge]][unpkg]
[![size][size-badge]][unpkg]
[![Maintainability][code-climate-badge]][code-climate]
[![PRs Welcome][pull-request-badge]](http://makeapullrequest.com)
# react-idled 😴
A React component that notifies you when the user is idle.
# Getting started
```shell
npm install --save react-idled
```
# Why?
This is a copy of [`react-idle`](https://github.com/ReactTraining/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](#render-function) | (**Function**) [A render prop](https://reactjs.org/docs/render-props.html) function | _() => {}_ |
| [onChange](#onchange-function) | (**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 |
```jsx
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](https://codesandbox.io/s/q8j7o0j6l9).
[codecov]: https://codecov.io/gh/newyork-anthonyng/react-idled
[codecov-badge]: https://img.shields.io/codecov/c/github/newyork-anthonyng/react-idled/master.svg
[code-climate]: https://codeclimate.com/github/newyork-anthonyng/react-idled/maintainability
[code-climate-badge]: https://api.codeclimate.com/v1/badges/faefec967ef40a030c3e/maintainability
[downloads-badge]: https://img.shields.io/npm/dm/react-idled.svg?style=flat-square
[license]: https://github.com/newyork-anthonyng/react-idled/blob/master/LICENSE
[license-badge]: https://img.shields.io/npm/l/react-idled.svg?style=flat-square
[npmcharts]: https://npmcharts.com/compare/react-idled
[npm-version]: https://www.npmjs.com/package/react-idled
[npm-badge]: https://img.shields.io/npm/v/react-idled.svg?style=flat-square
[pull-request-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[travis-badge]: https://travis-ci.org/newyork-anthonyng/react-idled.svg?branch=master
[travis-build]: https://travis-ci.org/newyork-anthonyng/react-idled
[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-idled?compression=gzip&label=gzip%20size&style=flat-square
[size-badge]: http://img.badgesize.io/https://unpkg.com/react-idled?label=size&style=flat-square
[unpkg]: https://unpkg.com/react-idled