{"id":22511556,"url":"https://github.com/codepunkt/redux-active","last_synced_at":"2025-10-06T22:58:52.243Z","repository":{"id":57350163,"uuid":"111009676","full_name":"codepunkt/redux-active","owner":"codepunkt","description":"Redux middleware \u0026 reducer to easily manage your users active/idle state","archived":false,"fork":false,"pushed_at":"2020-06-02T18:12:41.000Z","size":1964,"stargazers_count":2,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:29:28.045Z","etag":null,"topics":["active","flux","idle","middleware","react","reactjs","reducer","redux","state","user"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codepunkt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-16T18:52:48.000Z","updated_at":"2023-04-27T01:55:52.000Z","dependencies_parsed_at":"2022-09-16T10:10:44.015Z","dependency_job_id":null,"html_url":"https://github.com/codepunkt/redux-active","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fredux-active","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fredux-active/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fredux-active/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fredux-active/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codepunkt","download_url":"https://codeload.github.com/codepunkt/redux-active/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245949566,"owners_count":20698920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["active","flux","idle","middleware","react","reactjs","reducer","redux","state","user"],"created_at":"2024-12-07T02:13:14.774Z","updated_at":"2025-10-06T22:58:47.179Z","avatar_url":"https://github.com/codepunkt.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\u003cimg title=\"redux-active\" src=\"logo/redux-active.png\" width=\"500\" style=\"margin-top:20px;\"\u003e\u003c/p\u003e\n\n[![build status](https://img.shields.io/travis/reactjs/redux/master.svg)](https://travis-ci.org/codepunkt/redux-active)\n[![npm version](https://img.shields.io/npm/v/redux-active.svg)](https://www.npmjs.com/package/redux-active)\n[![Greenkeeper badge](https://badges.greenkeeper.io/codepunkt/redux-active.svg)](https://greenkeeper.io/)\n\n[Redux](http://github.com/reactjs/redux) middleware \u0026 reducer to easily manage your users active/idle state\n\nTiny footprint: ~*0.5 kB* \n\n## Install\n\nThis has a peer dependency of `redux`, which will have to be installed as well.\n\n```bash\nnpm install --save redux-active\n```\n\n##### UMD\n\n`redux-active` is also published as an UMD build. You can use it via the [unpkg](https://unpkg.com/) CDN:\n\n[https://unpkg.com/redux-active@latest/dist/umd/redux-active.min.js](https://unpkg.com/redux-active@latest/dist/umd/redux-active.min.js)\n\n## Setup\n\nFirst, you must add the middleware to your `redux` store.\n\n```javascript\n// store.js\n\nimport { createStore, applyMiddleware } from 'redux'\nimport { createActiveMiddleware } from 'redux-active'\nimport rootReducer from './rootReducer'\n\nconst activeMiddleware = createActiveMiddleware()\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(activeMiddleware)\n)\n```\n\nSecond, add the reducer to the root of your reducer tree.\n\n```javascript\n// rootReducer.js\n\nimport { combineReducers } from 'redux'\nimport { activeReducer } from 'redux-active'\n\nexport default combineReducers({\n  isActive: activeReducer,\n})\n```\n\n## Usage\n\nWith 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. \n\n### Example usecase\n\nImagine 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.\n\n## Options\n\n`createActiveMiddleware` accepts options to fine tune `redux-active` to your needs:\n\n```javascript\nimport { throttle } from 'lodash'\n\nconst activeMiddleware = createActiveMiddleware({\n  idleTimeout: 10000,\n  stateSelector: state =\u003e state.user.isActive,\n  throttle,\n})\n```\n\nAvailable options are:\n  - `eventTarget`\u003cbr\u003eThe target HTMLElement on which the middleware is listening for events.\u003cbr\u003eDefault: *window*\u003cbr\u003e\u003cbr\u003e\n  - `eventThrottleTimeout`\u003cbr\u003eThe internal event handler is throttled by this amount of miliseconds.\u003cbr\u003eDefault: *250*\u003cbr\u003e\u003cbr\u003e\n  - `eventTypes`\u003cbr\u003eThe events that are listened for on the `eventTarget`.\u003cbr\u003eDefault: *['click', 'focus', 'keydown', 'mousemove', 'resize', 'scroll', 'touchmove', 'wheel']*\u003cbr\u003e\u003cbr\u003e\n  - `idleCheckInterval`\u003cbr\u003eInterval length for repeated user idle checks in miliseconds.\u003cbr\u003eDefault: *1000*\u003cbr\u003e\u003cbr\u003e\n  - `idleTimeout`\u003cbr\u003eAmount of miliseconds before a user is considered idle.\u003cbr\u003eDefault: *60000*\u003cbr\u003e\u003cbr\u003e\n  - `stateSelector`\u003cbr\u003eMethod that returns the `isActive` boolean when given the state.\u003cbr\u003eDefault: *state =\u003e state.isActive*\u003cbr\u003e\u003cbr\u003e\n  - `throttle`\u003cbr\u003eMethod used to throttle event handlers. When none is given, dynamically requires lodash's throttle implementation.\u003cbr\u003eDefault: *require('lodash/throttle')*\n\n## Setup troubleshooting\n\nNote 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:\n\n```javascript\nimport { createStore, compose, applyMiddleware } from 'redux'\nimport { createActiveMiddleware } from 'redux-active'\nimport rootReducer from './rootReducer'\n\nconst activeMiddleware = createActiveMiddleware()\n\nconst store = createStore(\n  rootReducer,\n  initialState,\n  compose(\n    otherEnhancer,\n    applyMiddleware(activeMiddleware, otherMiddleware)\n  )\n)\n```\n\nIf you can't get this to work, be sure to consult the [redux documentation](https://redux.js.org/) and understand the difference between *middleware* and *enhancers* as well as the  API of the `createStore`, `compose` and `applyMiddleware` methods.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodepunkt%2Fredux-active","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodepunkt%2Fredux-active","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodepunkt%2Fredux-active/lists"}