React Session Timeout Alert
A Session Timeout Alert component to display after a set idle time for a user. The primary purpose for the alert is to logout a authenticated user after a set time of no interaction with the UI.
Install
npm install react-session-timeout-alert
Available Props
Name | Type | Default | Description |
---|---|---|---|
alertActionsClass | String | rst-alert-actions | Class for Alert Modal actions |
alertContainerClass | String | rst-alert | Class for Alert Modal container |
alertContentClass | String | rst-alert-content | Class for Alert Modal content |
alertTimerClass | String | rst-alert-timer | Class for Alert Modal timer |
alertTitle | String | null | Title for Alert Modal |
alertDescription | String | null | Description for Alert Modal |
cancelBtn | Object | {class: "rst-btn rst-btn-danger", text: "Stay Logged In", type: "button"} | Title and Text for Alert cancel button |
confirmBtn | Object | {class: "rst-btn rst-btn-primary", text: "Logout", type: "submit"} | Title and Text for Alert submit button |
debounceTime | Number | 500 | delay in ms before timer starts back due to user inactivity proceeding re-activity |
handleSessionTimeout | Function | () => alert("logging out") | Function to call on Alert submit button click and alert timer end |
idleTime | Number | 5 | Number of minutes before displaying alert modal |
modalTimeout | Number | 20 | Number of seconds for countdown before hiding alert modal and calling handleSessionTimeout method |
Basic Usage
import { ReactSessionTimeoutAlert } from 'react-session-timeout-alert';
<ReactSessionTimeoutAlert
idleTime={5}
modalTimeout={20}
alertTitle={"Idle Timeout Warning"}
alertDescription={"You are about to be logged out due to inactivity"}
cancelBtn={{
text: "Cancel",
class: "rst-btn rst-btn-danger"
}}
handleSessionTimeout = {() => alert("logging out")}
/>
Story Book
git clone git@github.com:EvanMiller12/react-session-timeout-alert.git
cd react-session-timeout-alert
make sure to use Node >=16.0.0
npm install
npm run storybook
Simple Example
git clone git@github.com:EvanMiller12/react-session-timeout-alert.git
cd react-session-timeout-alert/example
make sure to use Node >=16.0.0
npm install
npm run start
License
MIT license, Copyright (c) 2024 Evan Miller. For more information see LICENSE
.