react-moment

What is react-moment?

The react-moment npm package is a React component for the Moment.js library, which allows you to easily format, parse, and manipulate dates and times in your React applications.

What are react-moment's main functionalities?

Formatting Dates

This feature allows you to format dates in various ways. In this example, the date will be formatted as 'YYYY/MM/DD'.

<Moment format='YYYY/MM/DD'>{dateToFormat}</Moment>

Relative Time

This feature allows you to display dates in a relative format, such as 'a few seconds ago' or 'in 3 days'.

<Moment fromNow>{dateToFormat}</Moment>

Unix Timestamps

This feature allows you to convert Unix timestamps to human-readable dates.

<Moment unix>{unixTimestamp}</Moment>

Custom Calendar Time

This feature allows you to display dates in a custom calendar format, such as 'Today at 2:30 PM' or 'Last Monday at 4:00 PM'.

<Moment calendar>{dateToFormat}</Moment>

Duration

This feature allows you to display durations in a specified format, such as 'hh:mm:ss'.

<Moment duration={duration} format='hh:mm:ss'/>

Other packages similar to react-moment

date-fns

date-fns is a modern JavaScript date utility library that provides a comprehensive set of functions for manipulating dates. Unlike react-moment, date-fns is not tied to React and can be used in any JavaScript project. It is known for its functional programming style and tree-shakable modules.

dayjs

dayjs is a lightweight JavaScript date library that is a modern alternative to Moment.js. It has a similar API to Moment.js but is much smaller in size. Like react-moment, dayjs can be used to format, parse, and manipulate dates, but it is not specifically designed for React.

luxon

luxon is a powerful, modern JavaScript date and time library built by one of the Moment.js developers. It offers a more comprehensive and immutable API compared to Moment.js. Luxon is not specifically designed for React but can be easily integrated into React applications.

README

react-moment

React component for the moment date library.

• Installing
• Quick Start
• Formatting
• Parsing Dates
• From Now
• From
• To Now
• To
• Unix Timestamps
• Timezone
• Other Props
• License
• Contributors

Installing

npm install --save moment react-moment

Quick Start

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = '1976-04-19T12:59-0500';
        <Moment>{dateToFormat}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

The above example could also be written this way if you prefer to pass the date using an attribute rather than as a child to <Moment>.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = '1976-04-19T12:59-0500';
        <Moment date={dateToFormat} />
    }
}

The date value may be a string, object, array, or Date instance.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = new Date('1976-04-19T12:59-0500');
        <Moment date={dateToFormat} />
    }
}

Formatting

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment format="YYYY/MM/DD">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>1976/04/19</time>

Parsing Dates

Moment can parse most standard date formats. Use the parse attribute to tell moment how to parse the given date when non-standard.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment parse="YYYY-MM-DD HH:mm">1976-04-19 12:59</Moment>
    }
}

From Now

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment fromNow>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment fromNow ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years ago</time>

From

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment from="2015-04-19">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment from="2015-04-19" ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years ago</time>

To Now

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment toNow>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment toNow ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>in 40 years</time>

To

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment to="2015-04-19">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment to="2015-04-19" ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>in 39 years</time>

Unix Timestamps

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let unixTimestamp = 198784740;
        <Moment unix>{unixTimestamp}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

Timezone

To enable server side rendering (SSR), client and server has to provide same datetime, based on common Timezone. tz attribute will enable set the common timezone.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let unixTimestamp = 198784740;
        <Moment unix tz="America/Los_Angeles">{unixTimestamp}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 09:59:00 GMT-0800</time>

Other Props

Any other properties are passed to the <time> element.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment className="datetime" aria-hidden={true}>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time class="datetime" aria-hidden="true">Mon Apr 19 1976 12:59:00 GMT-0500</time>

License

This software is released under the MIT license. See LICENSE for more details.

Contributors

• markacola
• nclavaud
• Idan Gozlan