How to count idle time only for one component in the page?

How to use “react-idle-timer” for calculating idle time on a component. I don’t want to count the idle time for the whole page, instead I want to count the idle time only for one component on the page( in my case I build a chatbot. So I want to count the time that I’m not using the chatbot while doing some other things on the page). Please help me… If you can give me any solution (even in vanilla Js) I will appreciate that a lot.

Answer

Have a look at this article. with idle timer package.

npm i react-idle-timer --save

wrap with the component below

<IdleTimer
            ref={ref => { this.idleTimer = ref }}
            element={document}
            onActive={this.onActive}
            onIdle={this.onIdle}
            onAction={this.onAction}
            debounce={250}
            timeout={this.state.timeout} /> </IdleTimer>

refer : https://blog.bitsrc.io/how-to-implement-idle-timeout-in-react-830d21c32942