react-moment

library1.2.2jsnpmunverified

react-moment is a React component that acts as a wrapper for the widely-used `moment.js` date and time library. It enables developers to easily display formatted dates and times within React applications, leveraging Moment's extensive parsing, formatting, and manipulation capabilities. The current stable version, 1.2.2, integrates with `moment.js` versions 2.29.0 and higher. While `moment.js` itself is now considered a legacy project with its maintainers recommending modern alternatives like Luxon, date-fns, or Day.js, `react-moment` remains functional for projects still relying on the Moment.js ecosystem. It provides a declarative, component-based API for Moment's features, including relative time ("from now"), calendrical formatting, and custom date displays, often with built-in interval updates. The library also ships with TypeScript types, enhancing the developer experience in typed React projects.

web-framework serialization

npm install react-moment

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-MOMENT

react-moment

web-frameworkjavascriptv1.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Moment

✓ import Moment from 'react-moment';

✗ import { Moment } from 'react-moment';

The primary React component for displaying and formatting dates. It is a default export.

MomentProps

✓ import type { MomentProps } from 'react-moment';

TypeScript type definition for the props accepted by the Moment component.

startPooledTimer

✓ import Moment from 'react-moment'; Moment.startPooledTimer();

✗ import { startPooledTimer } from 'react-moment';

The `startPooledTimer` function is a static method on the default `Moment` export, used to initialize a global timer for interval updates. It's not a named export.

Demonstrates basic usage of the `Moment` component for various date and time displays, including custom formatting, relative time with live updates, and calendar views.

import React from 'react'; import Moment from 'react-moment'; import type { FC } from 'react'; const App: FC = () => { const dateToFormat = '1976-04-19T12:59-0500'; // Use a dynamic date for 'fromNow' to show updates. // Example: 1 hour from now const futureDate = new Date(Date.now() + 60 * 60 * 1000); return ( <div> <h1>React Moment Examples</h1> <p>Original date: <code>{dateToFormat}</code></p> <p>Standard format: <Moment date={dateToFormat} /></p> <p>Custom format: <Moment date={futureDate} format="MMMM Do YYYY, h:mm:ss a" /></p> {/* fromNow updates automatically by default every 60s, explicitly setting interval */} <p>Relative time (from now, updates every 30s): <Moment fromNow interval={30000}>{futureDate}</Moment></p> <p>Calendar time (e.g., Today at 3:00 PM): <Moment calendar>{new Date()}</Moment></p> <p>Just the current time: <Moment date={new Date()} format="HH:mm:ss" interval={1000} /></p> <p>Date passed as child: <Moment>{dateToFormat}</Moment></p> </div> ); }; export default App;

Debug

Known issues

breakingThe underlying `moment.js` library is officially deprecated and its maintainers recommend migrating to modern alternatives like Luxon, date-fns, or Day.js for new projects. `react-moment` builds directly on this legacy library.

fix

For new development, consider adopting a modern date library and its corresponding React component (e.g., `react-day-picker`, `react-date-fns`). If maintaining an existing project with `react-moment`, be aware of `moment.js`'s maintenance-only status and potential implications for long-term support and bundle size.

affects: *

gotchaThe `moment-timezone` package is required for timezone-specific operations (e.g., the `timezone` prop) and must be installed and imported separately.

fix

Install `moment-timezone` via `npm install --save moment-timezone` and then include `import 'moment-timezone';` in your application's entry point or the component where timezone functionality is utilized.

affects: >=1.0.0

gotchaThe `interval` prop, which controls how often the component re-renders for relative time displays (like `fromNow`), defaults to 60000 milliseconds (60 seconds).

fix

To update more frequently (e.g., every second for a live clock), explicitly set a lower `interval` value, such as `interval={1000}`. Set `interval={0}` to disable automatic updates entirely.

affects: >=1.0.0

gotchaThe `moment` library, a peer dependency, significantly increases bundle size and does not work well with modern tree-shaking algorithms, especially when including internationalization or timezone support.

fix

If bundle size is a critical concern, re-evaluate the need for `moment.js` and consider migrating to lighter alternatives. If `moment.js` is essential, ensure you are only importing necessary locales or specific timezone data if not using the full `moment-timezone` package.

affects: *

gotchaMissing `prop-types` as a peer dependency can lead to console warnings in development mode, particularly with older React versions or specific build configurations.

fix

Ensure `prop-types` is installed in your project: `npm install prop-types`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'moment' in 'node_modules/react-moment/dist'

The `moment` package, a peer dependency of `react-moment`, is not installed in your project.

fix

Install `moment` by running: `npm install --save moment react-moment`.

TypeError: Cannot read properties of undefined (reading 'tz') or moment(...).tz is not a function

Attempting to use `moment-timezone` features (like the `timezone` prop) without installing the `moment-timezone` package or importing it into your application.

fix

Install `moment-timezone`: `npm install --save moment-timezone`, and then add `import 'moment-timezone';` to your application's main entry file or the relevant component.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Incorrectly importing `Moment` as a named export instead of a default export.

fix

Change your import statement from `import { Moment } from 'react-moment';` to `import Moment from 'react-moment';`.

Warning: Failed prop type: The prop `date` is marked as required in `Moment`, but its value is `undefined`.

The `Moment` component was rendered without providing a date value, either via the `date` prop or as a child.

fix

Ensure the `Moment` component receives a valid date value: `<Moment date={myDateVar} />` or `<Moment>{myDateVar}</Moment>`.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

momentrequiredRequired peer dependency for all date/time manipulation and formatting functionality.

prop-typesrequiredRequired peer dependency for prop validation in React, particularly in older React versions or environments where prop-types is not implicitly bundled.

reactrequiredRequired peer dependency for React component functionality.

moment-timezoneoptionalRequired for timezone-specific date operations and must be installed separately if needed.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/headzoo/react-moment ↗

packagehttps://www.npmjs.com/package/react-moment ↗