React component that runs an action after no user activity is detected.

InactivityReset.js

import PropTypes from 'prop-types';
import { Component } from 'react';

const eventListenerOptions = { capture: true, passive: true };

// Events that signify that the user is still active.
const eventNames = ['keydown', 'mousedown', 'touchstart'];

class InactivityReset extends Component {
    constructor(props) {
        super(props);
        this.resetTimeout = this.resetTimeout.bind(this);
        this.timeoutHandle = null;
    }

    componentDidMount() {
        eventNames.forEach(eventName =>
            window.addEventListener(
                eventName,
                this.resetTimeout,
                eventListenerOptions
            )
        );

        this.resetTimeout();
    }

    componentWillUnmount() {
        eventNames.forEach(eventName =>
            window.removeEventListener(
                eventName,
                this.resetTimeout,
                eventListenerOptions
            )
        );
    }

    render() {
        return this.props.children;
    }

    resetTimeout() {
        const { onReset, timeout } = this.props;

        if (timeout <= 0) {
            return;
        }

        if (this.timeoutHandle) {
            window.clearTimeout(this.timeoutHandle);
        }

        this.timeoutHandle = window.setTimeout(onReset, timeout);
    }
}

InactivityReset.propTypes = {
    children: PropTypes.node.isRequired,
    onReset: PropTypes.func.isRequired,
    timeout: PropTypes.number.isRequired,
};

export default InactivityReset;