Redux-active NPM

Redux middleware & reducer to easily manage your users active/idle state

Tiny footprint: ~0.5 kB

Install

This has a peer dependency of redux, which will have to be installed as well.

npm install --save redux-active

UMD

redux-active is also published as an UMD build. You can use it via the unpkg CDN:

https://unpkg.com/redux-active@latest/dist/umd/redux-active.min.js

Setup

First, you must add the middleware to your redux store.

// store.js

import { createStore, applyMiddleware } from 'redux'
import { createActiveMiddleware } from 'redux-active'
import rootReducer from './rootReducer'

const activeMiddleware = createActiveMiddleware()

const store = createStore(
  rootReducer,
  applyMiddleware(activeMiddleware)
)

Second, add the reducer to the root of your reducer tree.

// rootReducer.js

import { combineReducers } from 'redux'
import { activeReducer } from 'redux-active'

export default combineReducers({
  isActive: activeReducer,
})

Usage

With this basic setup, redux-active adds event listeners to the window object to detect your users activity. Based on the events being triggered, the middleware dispatches IS_IDLE and IS_ACTIVE actions, based on which the reducer manages a isActive boolean in your state indicating if the user is active or not.

Example usecase

Imagine a dashboarding application where dashboards viewed on a large screen can be set to a fullscreen mode. Using the isActive flag provided by this module, various controls such as buttons or links could be hidden when the user is inactive whilst in fullscreen mode.

Options

createActiveMiddleware accepts options to fine tune redux-active to your needs:

import { throttle } from 'lodash'

const activeMiddleware = createActiveMiddleware({
  idleTimeout: 10000,
  stateSelector: state => state.user.isActive,
  throttle,
})

Available options are:

eventTargetThe target HTMLElement on which the middleware is listening for events.Default: window
eventThrottleTimeoutThe internal event handler is throttled by this amount of miliseconds.Default: 250
eventTypesThe events that are listened for on the eventTarget.Default: 'click', 'focus', 'keydown', 'mousemove', 'resize', 'scroll', 'touchmove', 'wheel'
idleCheckIntervalInterval length for repeated user idle checks in miliseconds.Default: 1000
idleTimeoutAmount of miliseconds before a user is considered idle.Default: 60000
stateSelectorMethod that returns the isActive boolean when given the state.Default: state => state.isActive
throttleMethod used to throttle event handlers. When none is given, dynamically requires lodash's throttle implementation.Default: require('lodash/throttle')

Setup troubleshooting

Note that if you are using additional middleware, custom enhancers or initialize the store with an initial state, the createStore call might look more like this:

import { createStore, compose, applyMiddleware } from 'redux'
import { createActiveMiddleware } from 'redux-active'
import rootReducer from './rootReducer'

const activeMiddleware = createActiveMiddleware()

const store = createStore(
  rootReducer,
  initialState,
  compose(
    otherEnhancer,
    applyMiddleware(activeMiddleware, otherMiddleware)
  )
)

If you can't get this to work, be sure to consult the redux documentation and understand the difference between middleware and enhancers as well as the API of the createStore, compose and applyMiddleware methods.