react-time-tracker v1.0.0
React Time Tracker
Tracks time spent by user on a page in a web application or in a react mobile app developed using Apache Cordova.
ReactTimeTracker component gives your application complete control to track time. You can pause/resume the tracker at any point by just passing a prop, typical use case is when you have dialogs on a page and want to ignore the time spent on dialogs. When your component unmounts ReactTimeTracker calls the callback passed as a prop with the actual time spent by user by ignoring the time during which tracker was paused.
It supports Apache Cordova, if you have a mobile app just include this component and it will calculate time by managing when your app got paused/resumed without doing any additional configuration.
Install
npm
React Time Tracker
can be bundled with the client using an
npm-compatible packaging system such as webpack or Browserify.
npm install react-time-tracker --save
Usage
For es6 import/export modules.
import React from 'react';
import TimeTracker from 'react-time-tracker';
export default class YourComponent extends React.Component {
constructor(props){
super(props);
}
render(){
return <div>
{/* Your component code will go here */}
<TimeTracker onSave={this.onSave} />
</div>
}
onSave(totalTime){
// e.g. store time in database
}
}
Props
onSave
: function
Gets called when TimeTracker component is unmounted from DOM. It receives totalTime as an argument.
<TimeTracker onSave={this.onSave} />
onSave(totalTime){
console.log('Total time spent by user', totalTime);
}
pause
: boolean
Useful when you want to control the component based on some custom conditions. You can use this property to pause/resume the tracker.
Pass pause = true to stop the tracker
<TimeTracker pause={true} onSave={this.onSave} />
To resume it again pass pause = false
<TimeTracker pause={false} onSave={this.onSave} />
License
Released under the MIT License.
6 years ago