Timeout

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import IdleTimer from 'react-idle-timer';

const TimeoutExample = () => {
    const [showModal, setShowModal] = useState(false);
    const [idleTimer, setidleTimer] = useState(null);
    const [logoutTimer, setlogoutTimer] = useState(null);

    const onIdle = () => {

        setShowModal(!showModal)
        var logouttimer = setTimeout(() => {
            handleLogout();
        }, 1000 * 5 * 1); // 5 seconds

        setlogoutTimer(logouttimer)
    }

    const handleStayLoggedIn = () => {
        if (logoutTimer) {
            clearTimeout(logoutTimer);
            setlogoutTimer(null)
        }
        idleTimer.reset();
        setShowModal(false)
    }

    const handleLogout = () => {
        props.history.push('/');
        //You can redirect on sing in page 
    };

  return (
    <>
        <IdleTimer
            ref={ref => { setidleTimer(ref) }}
            element={document}
            stopOnIdle={true}
            onIdle={onIdle}
            timeout={1000} // 10 seconds
        />
        <Modal size="sm" show={showModal}  >
            <Modal.Body className="pt-5">
                <Button bsPrefix="btn-close" onClick={() => setShowModal(!showModal)}>×</Button>
                <h4 className="mb-2" closeButton>Session expiring</h4>
                <p>You have been gone for a while, we will log you out in 5s unless you continue session to stay signed in.</p>
            </Modal.Body>
            <Modal.Footer className="border-0">
                <Button variant="primary" className="btn-block" onClick={handleLogout} > Logout </Button>
                <Button variant="link" className="btn-block" onClick={handleStayLoggedIn}>Continue working</Button>
            </Modal.Footer>
        </Modal>
    </>
  );
};

export default TimeoutExample;