@anedomansky/react-session
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-session

npm version

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

Readme

Keywords

Package Sidebar

Install

npm i @anedomansky/react-session

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

50.6 kB

Total Files

16

Last publish

Collaborators

  • anedomansky