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. **
;;
Component { superprops; } { return <div> /* Your component code will go here */ <TimeTracker onSave=thisonSave /> </div> } { // 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.