React higher order component for redux-idle-monitor (WIP)


React Redux higher order component for idle state monitoring.

npm i -S react-redux-idle-monitor


0.3.x5/19/2016=> Less bundled dependencies and server side rendering

  • In effort to allow freedom of build systems and keep bundles as small and least redundant as possible, this module now exports factories that take in heavy React / Redux dependencies and export the same functions as they used to expose. Documentation has been updated accordingly.

  • Style loading moved to componentDidMount allowing server side rendering to work now.

Whats it do?

Works in tandem with redux-idle-monitorto connect information about a users activity / idle state into your React components.

This project includes an optional React IdleMonitor component that can be imported and used standalone or as a wrapper for your components (auto-connects to your redux store and pulls out the idle state information for you). When developing, you may set the "showStatus" prop to true on the IdleMonitor component, which will add a docked element to your page that shows the current active / idle state of the user, last event that triggered activity, and additional information.

See a working demo in a real project at redux-webpack-boilerplate


There are a couple of ways to use react-redux-idle-monitor.

createConnector redux idle state connect factory

The simplest way to get idle props to your component is to wrap the component with the connector component. Import the createConnectorfactory from react-redux-idle-monitorand pass it the connect dependency from 'react-redux'. This may seem unusual, but it ensures this library is as small as possible and works with all build systems.

Wrapping your component with the connectIdleMonitorfunction as depicted below will inject your component with the idle properties all of the idle properties.

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { createConnector } from 'react-redux-idle-monitor'

const connectIdleMonitor = createConnector({ connect })

class MyMonitoringComponent extends Component {
  // connectIdleMonitor will tack these props from your redux 'idle' state
  static propTypes =  { idleStatus: PropTypes.string.isRequired       // 'ACTIVE' if user is active or one of your other configured idle states.
                      , isIdle: PropTypes.bool.isRequired             // false if user is active or idle if user is in one of your idle states.
                      , isPaused: PropTypes.bool.isRequired           // true if idle detection has been paused.
                      , isDetectionRunning: PropTypes.bool.isRequired // true if redux idle middleware is currently monitoring user mouse / keyboard activity.
                      , lastActive: PropTypes.number.isRequired       // the last time that the user was active (when detection is running).
                      , lastEvent: PropTypes.object.isRequired        // the last mouse event coordinates that were triggered (when detection is running).

  render() {
    const { idleStatus, isIdle, isPaused, isDetectionRunning, lastActive, lastEvent } = this.props
    return (
      <div style={{ color: isIdle ? '#f00' : '#0f0' }}>

export default connectIdleMonitor(MyMonitoringComponent)

createIdleMonitordocked React component factory (recommended as dev tool)

Another option is to export the createIdleMonitor React component factory as shown below. This monitor has an option to showStatuswhich will add a docked bar to the page with realtime information on the users idle status and is useful during development. It is the same component from the example at redux-webpack-boilerplate.

import React from 'react'
import { connect } from 'react-redux'
import createIdleMonitor from 'react-redux-idle-monitor'

const IdleMonitor = createIdleMonitor({ React, connect })

const MyComponent = props => (
  <IdleMonitor showStatus={true} />

IdleMonitor props

These props can be passed to the IdleMonitor React component to control the look and feel.

showStatusBy default, set to true.
showControlsBy default, set to false
idleTitleBy default, set to IDLEMONITOR
idleThemeBy default, set to solarized
invertThemeBy default, set to false(dark is the standard)
dockToBy default, set to 'bottom'. Supports 'top' and 'bottom'.
opacityBy default, set to 1
paletteMapMaps theme base16 colors to control. By default, set to { background: ['base00', 'base01'], content: ['base04', 'base02', 'base05'], accent: ['base0D', 'base0E', 'base0C'] }




上一篇:Scrum會議太多了! 你的團隊在Scrum活動中使用了多少時间?


  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    1 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png( "clipboard.png") reacta...

    7 个月前
  • 高品质 React UI 组件


    2 年前
  • 骚操作!在react中使用vuex

    原文地址( 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图( "效果图") 前言 此 blogreactadmin 项目是基...

    1 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    8 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    2 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    1 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前


扫码加入 JavaScript 社区