getRemainingTime () = returns the remaining time in milliseconds.If set to true you will need to manually call reset () to restart the timer. StopOnIdle (Boolean) = Stop the timer when user goes idle.Set to false to wait for user action before starting timer. StartOnMount (Boolean) = Start the timer when the component mounts.Element (Object) = Defaults to document, may pass a ref to another element.onAction (Function) = function to call on user action.onActive (Function) = function to call when user is no longer idle.onIdle (Function) = function to call when user is now idle.Timeout (Number) = idle timeout in milliseconds.Events, props and actions that are bound in IdleTimer by default:Īccording to npm js, idleTimer supports following events props and methods: The reason of this is that after first five minutes when onIdle will be called the isTimedOut will be false and in that point we are setting it to true, so if the user doesn’t perform any action in next five minutes onIdle will be called again and now the action set in if (isTimedOut) will be called. Note that if you use this implementation because there many more out there, if you want the limited time to be for example 10 minutes, in “ timeout ” prop you need to set it as 5 minutes. In this case we reset the timer of IdleTimer manually through ref and set the isTimedOut to true, so next time when onIdle will be called, the if condition will be satisfied and a modal will be shown on the screen. Obvious the other scenario will be isTimedOut = false. ( *Note: good practice is to show some modal on screen before log out the user). If it is, we call an action to logout the user or show a modal first. At this point first we are checking if isTimedOut = true. We got to onIdle function which is called when the user’s inactive time reaches the time we set in IdleTimer’s “ timeout “ prop. Good thing to know is that whenever onAction or onActive (another prop that idleTimer supports and its not included in this example) are called, the timer that works in background of IdleTimer will be automatically reset. Next we created onActionfunction which is called by IdleTimer when user performs some action, meaning that the user is active and that’s why we set isTimedOut to false. Next we created a ref to IdleTimer component, so later we will be able to reset the timeout that IdleTimer uses in background. Finally lets implement our AuthLayout component: import React, export default AuthLayout Īs simple as it can be! Now lets go step by step through every line:įirst of all, in the constructor we set in component’s state property isTimedOut with initial value false, which will represent if the inactive time reached the limit that we set as a prop “ timeout ” on IdleTimer.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |