react_intl_provider_formatted_message_localization_quickstart.ts

1import React from 'react';
2import ReactDOM from 'react-dom';
3import {IntlProvider, FormattedMessage, FormattedNumber} from 'react-intl';
4
5const messages = {
6  en: {
7    myMessage: 'Today is {ts, date, ::yyyyMMdd}',
8  },
9  fr: {
10    myMessage: "Aujourd'hui, c'est {ts, date, ::yyyyMMdd}",
11  },
12};
13
14const App = () => (
15  <IntlProvider messages={messages['en']} locale="en" defaultLocale="en">
16    <p>
17      <FormattedMessage
18        id="myMessage"
19        defaultMessage="Today is {ts, date, ::yyyyMMdd}"
20        values={{ts: Date.now()}}
21      />
22      <br />
23      <FormattedNumber value={1000} />
24    </p>
25  </IntlProvider>
26);
27
28ReactDOM.render(<App />, document.getElementById('root'));