Tracks consumed time in a page while considering idle time and user activity.
# With yarn
yarn add surf-timer
# With npm
npm i surf-timerimport { useSurfTimer } from "surf-timer";
function App() {
const surfTime = useSurfTimer({
idleTime: 2000,
initialState: false,
intervalTime: 1000,
fn() {
console.log("hello world");
},
});
useEffect(() => {
surfTime.interval.start();
return surfTime.interval.stop;
}, []);
return (
<div>
<h2>Current Idle State: {surfTime.idle ? "true" : "false"}</h2>
<h2>
Current Interval State: {surfTime.interval.active ? "Start" : "Stop"}
</h2>
</div>
);
}
export default App;| Parameters | Description |
|---|---|
idleTime |
Refers to the duration seconds of user inactivity. |
initialState |
Initial state of idle (boolean) |
intervalTime |
Amount of milliseconds between each tick |
fn |
Function that is called at each interval tick |
events |
Events that hook will listen |
By default, the hook will listen to keypress, mousemove, touchmove, click and scrollevents to set idle status.
surfTime.idle -> current idle status
surfTime.interval.start -> start interval
surfTime.interval.stop -> stop interval
surfTime.interval.toggle -> toggle interval
surtTime.interval.active -> current interval status