{"id":11754,"library":"react-moment","title":"React Moment Component","description":"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.","status":"maintenance","version":"1.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/headzoo/react-moment","tags":["javascript","date","moment","react","react-component","time","typescript"],"install":[{"cmd":"npm install react-moment","lang":"bash","label":"npm"},{"cmd":"yarn add react-moment","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-moment","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all date/time manipulation and formatting functionality.","package":"moment","optional":false},{"reason":"Required peer dependency for prop validation in React, particularly in older React versions or environments where prop-types is not implicitly bundled.","package":"prop-types","optional":false},{"reason":"Required peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Required for timezone-specific date operations and must be installed separately if needed.","package":"moment-timezone","optional":true}],"imports":[{"note":"The primary React component for displaying and formatting dates. It is a default export.","wrong":"import { Moment } from 'react-moment';","symbol":"Moment","correct":"import Moment from 'react-moment';"},{"note":"TypeScript type definition for the props accepted by the Moment component.","symbol":"MomentProps","correct":"import type { MomentProps } from 'react-moment';"},{"note":"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.","wrong":"import { startPooledTimer } from 'react-moment';","symbol":"startPooledTimer","correct":"import Moment from 'react-moment'; Moment.startPooledTimer();"}],"quickstart":{"code":"import React from 'react';\nimport Moment from 'react-moment';\nimport type { FC } from 'react';\n\nconst App: FC = () => {\n  const dateToFormat = '1976-04-19T12:59-0500';\n  // Use a dynamic date for 'fromNow' to show updates.\n  // Example: 1 hour from now\n  const futureDate = new Date(Date.now() + 60 * 60 * 1000);\n\n  return (\n    <div>\n      <h1>React Moment Examples</h1>\n      <p>Original date: <code>{dateToFormat}</code></p>\n      <p>Standard format: <Moment date={dateToFormat} /></p>\n      <p>Custom format: <Moment date={futureDate} format=\"MMMM Do YYYY, h:mm:ss a\" /></p>\n      {/* fromNow updates automatically by default every 60s, explicitly setting interval */}\n      <p>Relative time (from now, updates every 30s): <Moment fromNow interval={30000}>{futureDate}</Moment></p>\n      <p>Calendar time (e.g., Today at 3:00 PM): <Moment calendar>{new Date()}</Moment></p>\n      <p>Just the current time: <Moment date={new Date()} format=\"HH:mm:ss\" interval={1000} /></p>\n      <p>Date passed as child: <Moment>{dateToFormat}</Moment></p>\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates basic usage of the `Moment` component for various date and time displays, including custom formatting, relative time with live updates, and calendar views."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":"*"},{"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.","message":"The `moment-timezone` package is required for timezone-specific operations (e.g., the `timezone` prop) and must be installed and imported separately.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `interval` prop, which controls how often the component re-renders for relative time displays (like `fromNow`), defaults to 60000 milliseconds (60 seconds).","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure `prop-types` is installed in your project: `npm install prop-types`.","message":"Missing `prop-types` as a peer dependency can lead to console warnings in development mode, particularly with older React versions or specific build configurations.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `moment` by running: `npm install --save moment react-moment`.","cause":"The `moment` package, a peer dependency of `react-moment`, is not installed in your project.","error":"Module not found: Can't resolve 'moment' in 'node_modules/react-moment/dist'"},{"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.","cause":"Attempting to use `moment-timezone` features (like the `timezone` prop) without installing the `moment-timezone` package or importing it into your application.","error":"TypeError: Cannot read properties of undefined (reading 'tz') or moment(...).tz is not a function"},{"fix":"Change your import statement from `import { Moment } from 'react-moment';` to `import Moment from 'react-moment';`.","cause":"Incorrectly importing `Moment` as a named export instead of a default export.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure the `Moment` component receives a valid date value: `<Moment date={myDateVar} />` or `<Moment>{myDateVar}</Moment>`.","cause":"The `Moment` component was rendered without providing a date value, either via the `date` prop or as a child.","error":"Warning: Failed prop type: The prop `date` is marked as required in `Moment`, but its value is `undefined`."}],"ecosystem":"npm"}