react_intl_provider_formatted_message_quickstart.ts

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { IntlProvider, FormattedMessage, FormattedNumber } from 'react-intl';
4
5// Define your messages (usually loaded from a separate JSON file)
6const messages: Record<string, string> = {
7  myMessage: 'Today is {ts, date, ::yyyyMMdd}',
8};
9
10const App: React.FC = () => {
11  return (
12    <IntlProvider messages={messages} locale="en" defaultLocale="en">
13      <p>
14        <FormattedMessage
15          id="myMessage"
16          defaultMessage="Today is {ts, date, ::yyyyMMdd}"
17          values={{ ts: Date.now() }}
18        />
19        <br />
20        <FormattedNumber value={1000} />
21      </p>
22    </IntlProvider>
23  );
24};
25
26ReactDOM.render(<App />, document.getElementById('root'));