react-session

An easy-to-use session component with included warning and renewal modals.

Features

• Session timer
• Session warning modal
• Session expired modal

Installation

npm install @anedomansky/react-session

Usage

import Session from '@anedomansky/react-session';
import '/node_modules/@anedomansky/react-session/dist/style.css';

function App() {
  return (
    <div className="App">
      <Session
        additionalExpiredModalClasses="text-expired"
        additionalWarnModalClasses="text-warn"
        duration={10}
        expiredModalBtnText="Restart"
        expiredModalText="Session is expired!"
        expiredModalTitle="Expired Session!"
        onExpiredModalBtnClick={() => console.log('Expired button clicked')}
        onWarnModalBtnClick={() => console.log('Warn button clicked')}
        sessionInfoText="Duration"
        warnModalBtnText="Okay"
        warnModalText="Session is soon over."
        warnModalTitle="Attention!"
      />
    </div>
  )
}

export default App

Props

| Name | Type | Default | Description | | ----------------------------- | ---------------------------------------------------- | ------------------------------- | ------------------------------------------------------------ | | additionalExpiredModalClasses | string | '' | Additional CSS classes for the <dialog>-Element | | additionalWarnModalClasses | string | '' | Additional CSS classes for the <dialog>-Element | | duration | number | 1800 | The duration of the session in seconds | | expiredModalBtnText | string | 'Reset' | The expired modal button text | | expiredModalText | string | 'The session is expired!' | The expired modal text | | expiredModalTitle | string | 'Expired!' | The expired modal title | | sessionInfoText | string | 'Session' | The text that is shown above the session timer | | onExpiredModalBtnClick | (event: React.MouseEvent) => void | | Callback, triggered when the expired modal button is clicked | | onWarnModalBtnClick | (event: React.MouseEvent) => void | | Callback, triggered when the warn modal button is clicked | | warnModalBtnText | string | 'OK' | The warn modal button text | | warnModalText | string | 'The session will soon expire!' | The warn modal text | | warnModalTitle | string | 'Warning!' | The warn modal title |