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

react-user-focus

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.

Installation

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

or

yarn add react-user-focus

Usage

react-user-focus can contain children, or be rendered simply by itself. https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create

import ReactUserFocus from 'react-user-focus';

<ReactUserFocus
  onFocusChange={onFocusChange}
  onIdleChange={onIdleChange}
  idleTime={2}
/>

Properties

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}`);
}

<ReactUserFocus
  onFocusChange={onFocusChange}
/>
  • 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}`);
}

<ReactUserFocus
  onIdleChange={onIdleChange}
  idleTime={2}
/>

Demo & Examples

Live demo - To see a live demo of this component, visit my website: SeanKilgarriff.com. 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.

License

This repository is covered by the MIT License

Copyright (c) 2016 Sean Kilgarriff.

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |