Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-session-timeout-alert

EvanMiller1242MIT2.1.0

A Session Timeout Alert alert component to display after a set idle timeout of a user

react, timeout, session timeout, session timeout alert, session timeout modal

readme

React Session Timeout Alert

NPM version npm downloads GitHub license

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.