React component that displays an auto-updating relative time.

RelativeTime.js

import moment from 'moment';
import PropTypes from 'prop-types';
import { Component, createElement as h } from 'react';

class RelativeTime extends Component {
    constructor(props) {
        super(props);
        this.intervalId = null;
        this.state = { output: moment(props.time).fromNow() };
        this.updateOutput = this.updateOutput.bind(this);
    }

    componentDidMount() {
        this.intervalId = window.setInterval(
            this.updateOutput,
            this.props.intervalDelay
        );
    }

    componentWillUnmount() {
        window.clearInterval(this.intervalId);
    }

    render() {
        return h('time', { dateTime: this.props.time }, this.state.output);
    }

    updateOutput() {
        this.setState({ output: moment(this.props.time).fromNow() });
    }
}

RelativeTime.defaultProps = {
    intervalDelay: 10000, // 10 seconds
};

RelativeTime.propTypes = {
    intervalDelay: PropTypes.number,
    time: PropTypes.oneOfType([
        PropTypes.instanceOf(Date),
        PropTypes.string,
    ]).isRequired,
};

export default RelativeTime;