react-intl-datetime-format

Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.

You can also play with react-intl-datetime-format in a CodeSandbox.

Features

• Effortless format dates and times for different locales
• Possibility to use strings, Unix timestamp or Date instances to format a date
• Relies in the standard Intl.DateTimeFormat constructor
• Possibility to use it as an standalone React Component using props to configure it
• Possibility to use a general config using a React Context Provider
• Detects automatically the browser language as a default locale
• Exposes a function to update the Provider config
• Ability to render a date or a time with any html tag
• Props match Intl.DateTimeFormat constructor arguments

Support

• Works in any modern browsers, and IE >= 11

Installation

npm i react-intl-datetime-format

Usage

This is the easiest way to use DateTime formatter component:

import { DateTime } from "react-intl-datetime-format"

​

// renders 12/3/1983

const Foo = () => <DateTime locale="en-US">03 dec 1983</DateTime>

​

// renders the current formatted date guessing the locale from the browser

const Bar = () => <DateTime />

You don't even need to pass a locale prop, by default it will try guess the locale from the browser.

Recommended usage with a React Context Provider

The recommended way to use it would be with a Context.Provider, this will allow you to have a global configuration so you don't need to pass props every time you format a date or time.

A provider IntlProvider is exposed with a default config, but you can you set your own config and use it in your App component.

// In your App.js or similar...

import { IntlProvider } from "react-intl-datetime-format"

​

const intlConfig = {

  locale: "en-US",

  options: {

    year: "numeric",

    month: "long",

    day: "numeric",

    hour: "numeric",

    minute: "numeric",

    second: "numeric",

    timeZoneName: "short",

  },

}

​

const App = () => <IntlProvider config={intlConfig}>...</IntlProvider>

​

// In any other part of your code

import { DateTime } from "react-intl-datetime-format"

​

const date = new Date(2012, 11, 20, 3, 0, 0)

​

const HelloWorld = () => (

  // renders "December 20, 2012, 4:00:00 AM GMT+1" (based on the provider config)

  <DateTime>{date}</DateTime>

)

The configuration object that IntlProvider expects is basically matching the arguments from Intl.DateTimeFormat constructor.

Possible imports

You can import several things from react-intl-datetime-format, let's check the possibilities:

• Date Component to format date and times
• IntlProvider to set a global configuration
• useIntl hook to update the configuration