React Idle

!logo

What?
-----

Notifies your app when the user is idle.

Why?
----

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

Installation
------------

``bash
npm install react-idle


or


yarn add react-idle
`

And then import it:

`js
// using es modules
import Idle from 'react-idle'

// common.js
const Idle = require('react-idle').default

// AMD
// I've forgotten but it should work.
`

Or use script tags and globals.

`html

`

And then grab it off the global like so:

`js
const Idle = ReactIdle.default
`


How?
----

`render-babel
// import { Idle } from 'react-idle'
const { default: Idle } = ReactIdle

ReactDOM.render((
onChange={({ idle }) => console.log({ idle })}
render={({ idle }) =>



{idle
? "You are idle."
: "Stop doing stuff for 1 second."
}



}
/>
), DOM_NODE)
`

Props
-----

$3

Whatever you'd like to render in response to changes in user activity.

`render-babel
// import { Idle } from 'react-idle'
const { default: Idle } = ReactIdle

ReactDOM.render((




{idle
? "whistles"
: "Woah what now?"
}



}/>
), DOM_NODE)
`

$3

How long before notifying that the user is idle in milliseconds.

`render-babel
// import { Idle } from 'react-idle'
const { default: Idle } = ReactIdle

ReactDOM.render((
timeout={2000}
render={({ idle }) =>



{idle
? "You are idle."
: "Stop doing stuff for 2 seconds."
}



}
/>
), DOM_NODE)
`

$3

Called whenever the user's activity state changes, a great time to change the owner component's state, or to kick off some imperative work like pre-fetching code-split bundles or images.

`render-babel
// import { Idle } from 'react-idle'
const { default: Idle } = ReactIdle

class App extends React.Component {
state = {
cornifyLoaded: false
}

preloadCornify = () => {
const script = document.createElement('script')
script.onload = () => this.setState({ cornifyLoaded: true })
script.src = '//www.cornify.com/js/cornify.js'
document.body.appendChild(script)
}

cornify = () => {
window.cornify_add()
}

render() {
return (


)
}
}

ReactDOM.render(, DOM_NODE)
`

$3

The window events to listen for activity, defaults to [ "mousemove", "mousedown", "keydown", "touchstart", "scroll" ].




$3

You can start out as idle by passing `, by default it is false--assumes that loading the page initially is a user interation.

Legal
-----

Released under MIT license.

Copyright © 2017-present React Training LLC