React <Moment /> Component

moment.js

import moment from 'moment';
import React, { Component, PropTypes } from 'react';

export default class Moment extends Component {
  static propTypes = {
    children: PropTypes.func,
    date: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.instanceOf(Date),
    ]),
    format: PropTypes.string,
    liveUpdate: PropTypes.bool.isRequired,
    liveUpdateInterval: PropTypes.number,
  };

  static defaultProps = {
    format: 'MMMM Do YYYY, h:mm a',
    liveUpdate: false,
  };

  componentDidMount() {
    const { liveUpdate, liveUpdateInterval } = this.props;

    if (liveUpdate || liveUpdateInterval) {
      const interval = liveUpdateInterval || 10000;
      this.interval = setInterval(() => this.forceUpdate(), interval);
    }
  }

  componentWillUnmount() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }

  render() {
    const { date, children, format, ...rest } = this.props;

    return (
      <div {...rest}>
        {children ?
            children(moment(date))
          :
            moment(date).format(format)
        }
      </div>
    );
  }
}

Moment.js React Component.md

Basic Format API

Since the usage of format is so common, there is an easy API:

<Moment date={publishedAt} format="MMMM D, YYYY" />

Advanced API

For more advanced usage of the Moment API, you can use <Moment /> as a Function as Child component:

<Moment date={updatedAt} liveUpdate>
  {moment => moment.fromNow()}
</Moment>

liveUpdate will re-render the component every 10 seconds for periodic updates. Override the default interval of 10 seconds by providing liveUpdateInterval.