Last updated 2 years ago by skilgarriff .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-heatmapjs 
SYNC missed versions from official npm registry.


react-user-focus is a Reactjs component that communicates the state of the user's focus (focused, idle, away). The purpose of this component is to allow user-dependent processes such as animations, and communication to be aware of the current state of the user's focus.


The easiest way to use react-user-focus is to install it from NPM or Yarn and include it in your own React build process (using Browserify, Webpack, etc).

npm install react-user-focus --save


yarn add react-user-focus


react-user-focus can contain children, or be rendered simply by itself.

import ReactUserFocus from 'react-user-focus';



react-user-focus currently has 3 properties can that can be included when rendering the component.

  • onFocusChange - accepts a function that is called with the parameter of isHidden when the focus of the user changes.
import ReactUserFocus from 'react-user-focus';

function onFocusChange(isHidden) {
  console.log(`Is hidden?:${isHidden}`);

  • onIdleChange - accepts a function that is called with the parameter of isIdle when the idleness of a user changes.

  • idleTime - the amount of time (in seconds) with no engagement to consider a user as idle.

import ReactUserFocus from 'react-user-focus';

function onIdleChange(isIdle) {
  console.log(`Is Idle?:${isIdle}`);


Demo & Examples

Live demo - To see a live demo of this component, visit my website: Open up the console in developer tools, and type amIFocused() into the console.

To build the examples locally, run:

npm install
npm start

Then open localhost:8080 in a browser. If you have other webpack dev servers running, the ports will be incremental - 8081, 8082, etc.


This repository is covered by the MIT License

Copyright (c) 2016 Sean Kilgarriff.

Current Tags

  • 1.2.1                                ...           latest (2 years ago)

7 Versions

  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 7
Last Day 0
Last Week 7
Last Month 1
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |