TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

build status npm version Greenkeeper badge

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

Tiny footprint: ~0.5 kB


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

npm install --save redux-active

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


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(

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,


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.


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,

Available options are:

  • eventTarget
    The target HTMLElement on which the middleware is listening for events.
    Default: window

  • eventThrottleTimeout
    The internal event handler is throttled by this amount of miliseconds.
    Default: 250

  • eventTypes
    The events that are listened for on the eventTarget.
    Default: ['click', 'focus', 'keydown', 'mousemove', 'resize', 'scroll', 'touchmove', 'wheel']

  • idleCheckInterval
    Interval length for repeated user idle checks in miliseconds.
    Default: 1000

  • idleTimeout
    Amount of miliseconds before a user is considered idle.
    Default: 60000

  • stateSelector
    Method that returns the isActive boolean when given the state.
    Default: state => state.isActive

  • throttle
    Method 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(
    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.


DownloadsWeekly Downloads






Last publish


  • cwer