-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
332 lines (332 loc) · 240 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-react-intl/components" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.7.0">
<title data-rh="true">Components | Format.JS</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://formatjs.github.io/docs/react-intl/components"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Components | Format.JS"><meta data-rh="true" name="description" content="React Intl has a set of React components that provide a declarative way to setup an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative API."><meta data-rh="true" property="og:description" content="React Intl has a set of React components that provide a declarative way to setup an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative API."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://formatjs.github.io/docs/react-intl/components"><link data-rh="true" rel="alternate" href="https://formatjs.github.io/docs/react-intl/components" hreflang="en"><link data-rh="true" rel="alternate" href="https://formatjs.github.io/docs/react-intl/components" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.ca54e791.css">
<script src="/assets/js/runtime~main.ecd1e583.js" defer="defer"></script>
<script src="/assets/js/main.7b2dad9f.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_kU0b" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="FormatJS" class="themedComponent_bE6v themedComponent--light_OxWA"><img src="/img/logo-dark.svg" alt="FormatJS" class="themedComponent_bE6v themedComponent--dark_C0gC"></div><b class="navbar__title text--truncate">Format.JS</b></a><a class="navbar__item navbar__link" href="/docs/getting-started/installation">Docs</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/react-intl">API References</a><a class="navbar__item navbar__link" href="/docs/polyfills">Polyfills</a><a class="navbar__item navbar__link" href="/docs/tooling/cli">Tooling</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/formatjs/formatjs" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_C4lv"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_iF1b colorModeToggle_W34L"><button class="clean-btn toggleButton_BZJW toggleButtonDisabled_dSJA" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_dmFw"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_pKxd"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_aC3B"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_Rp8U"><div class="docsWrapper_z6Sp"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_NHIv" type="button"></button><div class="docRoot_Az5O"><aside class="theme-doc-sidebar-container docSidebarContainer_Ge7Y"><div class="sidebarViewport_lYe0"><div class="sidebar_srQV"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_NXqs"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/react-intl">react-intl</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl">Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/react-intl/components">Components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl/api">Imperative API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl/upgrade-guide-5x">Upgrade Guide (v4 -> v5)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl/upgrade-guide-4x">Upgrade Guide (v3 -> v4)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl/upgrade-guide-3x">Upgrade Guide (v2 -> v3)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/react-intl/upgrade-guide-2x">Upgrade Guide (v1 -> v2)</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/intl">@formatjs/intl</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/vue-intl">vue-intl</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/intl-messageformat">intl-messageformat</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/icu-messageformat-parser">icu-messageformat-parser</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_fjwo"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_JFza"><div class="docItemContainer_l1NY"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_UqmC" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_DJUX"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">react-intl</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Components</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_Q9UQ theme-doc-toc-mobile tocMobile_BSX6"><button type="button" class="clean-btn tocCollapsibleButton_dr7J">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Components</h1></header><p>React Intl has a set of React components that provide a declarative way to setup an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative <a href="/docs/react-intl/api">API</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="why-components">Why Components?<a href="#why-components" class="hash-link" aria-label="Direct link to Why Components?" title="Direct link to Why Components?"></a></h2>
<p>Beyond providing an idiomatic-React way of integrating internationalization into a React app, and the <code><Formatted*></code> components have benefits over always using the imperative API directly:</p>
<ul>
<li>Render React elements that seamlessly compose with other React components.</li>
<li>Support rich-text string/message formatting in <code><FormattedMessage></code>.</li>
<li>Implement advanced features like <code><FormattedRelativeTime></code>'s updating over time.</li>
<li>Provide TypeScript type definitions.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="intlprovider">IntlProvider<a href="#intlprovider" class="hash-link" aria-label="Direct link to IntlProvider" title="Direct link to IntlProvider"></a></h2>
<p>React Intl uses the provider pattern to scope an i18n context to a tree of components. This allows configuration like the current locale and set of translated strings/messages to be provided at the root of a component tree and made available to the <code><Formatted*></code> components. This is the same concept as what Flux frameworks like <a href="http://redux.js.org/" target="_blank" rel="noopener noreferrer">Redux</a> use to provide access to a store within a component tree.</p>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_aVAQ"><p>All apps using React Intl must use the <code><IntlProvider></code> or <code><RawIntlProvider></code> component.</p></div></div>
<p>This component is used to setup the i18n context for a tree. Usually, this component will wrap an app's root component so that the entire app will be within the configured i18n context. The following are the i18n configuration props that can be set:</p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">interface</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">IntlConfig</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> locale</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> formats</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> CustomFormats</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> messages</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Record</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> Record</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> MessageFormatElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> defaultLocale</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> defaultFormats</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> CustomFormats</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> timeZone</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> textComponent</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> React</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ComponentType </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">keyof</span><span class="token plain"> React</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token constant" style="color:rgb(130, 170, 255)">JSX</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">IntrinsicElements</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> wrapRichTextChunksInFragment</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">boolean</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> defaultRichTextElements</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Record</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FormatXMLElementFn</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">React</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ReactNode</span><span class="token operator" style="color:rgb(137, 221, 255)">>></span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">onError</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">err</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">void</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="locale-formats-and-messages">locale, formats, and messages<a href="#locale-formats-and-messages" class="hash-link" aria-label="Direct link to locale, formats, and messages" title="Direct link to locale, formats, and messages"></a></h3>
<p>The user's current locale and what the app should be rendered in. While <code>defaultLocale</code> and <code>defaultFormats</code> are for fallbacks or during development and represent the app's default. Notice how there is no <code>defaultMessages</code>, that's because each <a href="#message-descriptor">Message Descriptor</a> provides a <code>defaultMessage</code>.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="defaultlocale-and-defaultformats">defaultLocale and defaultFormats<a href="#defaultlocale-and-defaultformats" class="hash-link" aria-label="Direct link to defaultLocale and defaultFormats" title="Direct link to defaultLocale and defaultFormats"></a></h3>
<p>Default locale & formats for when a message is not translated (missing from <code>messages</code>). <code>defaultLocale</code> should be the locale that <code>defaultMessage</code>s are declared in so that a sentence is coherent in a single locale. Without <code>defaultLocale</code> and/or if it's set incorrectly, you might run into scenario where a sentence is in English but embedded date/time is in Spanish.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="textcomponent">textComponent<a href="#textcomponent" class="hash-link" aria-label="Direct link to textComponent" title="Direct link to textComponent"></a></h3>
<p>Provides a way to configure the default wrapper for React Intl's <code><Formatted*></code> components. If not specified, <a href="https://reactjs.org/docs/fragments.html" target="_blank" rel="noopener noreferrer"><code><React.Fragment></code></a> is used. Before V3, <code>span</code> was used instead; check the <a href="/docs/react-intl/upgrade-guide-3x">migration guide</a> for more info.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="onerror">onError<a href="#onerror" class="hash-link" aria-label="Direct link to onError" title="Direct link to onError"></a></h3>
<p>Allows the user to provide a custom error handler. By default, error messages are logged using <code>console.error</code> if <code>NODE_ENV</code> is not set to <code>production</code>.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="onwarn">onWarn<a href="#onwarn" class="hash-link" aria-label="Direct link to onWarn" title="Direct link to onWarn"></a></h3>
<p>Allows the user to provide a custom warning handler. By default, warning messages are logged using <code>console.warning</code> if <code>NODE_ENV</code> is not set to <code>production</code>.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="wraprichtextchunksinfragment">wrapRichTextChunksInFragment<a href="#wraprichtextchunksinfragment" class="hash-link" aria-label="Direct link to wrapRichTextChunksInFragment" title="Direct link to wrapRichTextChunksInFragment"></a></h3>
<p>When formatting rich text message, the output we produced is of type <code>Array<string | React.ReactElement></code>, which will trigger key error. This wraps the output in a single <code>React.Fragment</code> to suppress that.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="defaultrichtextelements">defaultRichTextElements<a href="#defaultrichtextelements" class="hash-link" aria-label="Direct link to defaultRichTextElements" title="Direct link to defaultRichTextElements"></a></h3>
<p>A map of tag to rich text formatting function. This is meant to provide a centralized way to format common tags such as <code><b></code>, <code><p></code>... or enforcing certain Design System in the codebase (e.g standardized <code><a></code> or <code><button></code>...). See <a href="https://github.com/formatjs/formatjs/issues/1752" target="_blank" rel="noopener noreferrer">https://github.com/formatjs/formatjs/issues/1752</a> for more context.</p>
<p>These configuration props are combined with the <code><IntlProvider></code>'s component-specific props:</p>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">IntlConfig</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">ReactNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Finally, child elements <em>must</em> be supplied to <code><IntlProvider></code>.</p>
<p><strong>Example:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">App</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">importantDate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">FormattedDate</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)">importantDate</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">year</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">numeric</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">month</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">long</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">day</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">numeric</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">weekday</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">long</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token maybe-class-name">ReactDOM</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">render</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">IntlProvider</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">locale</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript dom variable" style="color:rgb(191, 199, 213)">navigator</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token tag script language-javascript property-access" style="color:rgb(255, 85, 114)">language</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">App</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">importantDate</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(255, 85, 114);font-style:italic">new</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 107)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459913574887</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span><span class="token plain-text"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">IntlProvider</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token dom variable" style="color:rgb(191, 199, 213)">document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getElementById</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">'container'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Assuming <code>navigator.language</code> is <code>"fr"</code>:</p>
<div class="language-html codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-html codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain">mardi 5 avril 2016</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(255, 85, 114)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="rawintlprovider">RawIntlProvider<a href="#rawintlprovider" class="hash-link" aria-label="Direct link to RawIntlProvider" title="Direct link to RawIntlProvider"></a></h2>
<p>This is the underlying <code>React.Context.Provider</code> object that <code>IntlProvider</code> use. It can be used in conjunction with <code>createIntl</code>:</p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports">createIntl</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token imports"> createIntlCache</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">RawIntlProvider</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'react-intl'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// This is optional but highly recommended</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// since it prevents memory leak</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> cache </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">createIntlCache</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> intl </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">createIntl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> locale</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'fr-FR'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> messages</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cache</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Pass it to IntlProvider</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">RawIntlProvider</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)">intl</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">foo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">RawIntlProvider</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formatteddate">FormattedDate<a href="#formatteddate" class="hash-link" aria-label="Direct link to FormattedDate" title="Direct link to FormattedDate"></a></h2>
<p>This component uses the <a href="/docs/react-intl/api#formatdate"><code>formatDate</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener noreferrer"><code>Intl.DateTimeFormat</code></a> APIs and has <code>props</code> that correspond to the <code>DateTimeFormatOptions</code> specified above.</p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DateTimeFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedDate</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedDate></code> will render the formatted date into a <code><React.Fragment></code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDate</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459832991883</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p><strong>Example with Options:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDate</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459832991883</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">year</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">numeric</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">month</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">long</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">day</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">2-digit</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formatteddateparts">FormattedDateParts<a href="#formatteddateparts" class="hash-link" aria-label="Direct link to FormattedDateParts" title="Direct link to FormattedDateParts"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts" target="_blank" rel="noopener noreferrer">Intl.DateTimeFormat.prototype.formatToParts</a> which is not available in IE11. Please use our <a href="/docs/polyfills/intl-datetimeformat">polyfill</a> if you plan to support IE11.</p></div></div>
<p>This component provides more customization to <code>FormattedDate</code> by allowing children function to have access to underlying parts of the formatted date. The available parts are listed <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts" target="_blank" rel="noopener noreferrer">here</a></p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DateTimeFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">parts</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DateTimeFormatPart</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDateParts</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459832991883</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">year</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">numeric</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">month</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">long</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">day</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">2-digit</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDateParts</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedtime">FormattedTime<a href="#formattedtime" class="hash-link" aria-label="Direct link to FormattedTime" title="Direct link to FormattedTime"></a></h2>
<p>This component uses the <a href="/docs/react-intl/api#formattime"><code>formatTime</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener noreferrer"><code>Intl.DateTimeFormat</code></a> APIs and has <code>props</code> that correspond to the <code>DateTimeFormatOptions</code> specified above, with the following defaults:</p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> hour</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'numeric'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> minute</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'numeric'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">DateTimeFormatOptions</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedDate</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedTime></code> will render the formatted time into a <code>React.Fragment</code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedTime</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459832991883</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedtimeparts">FormattedTimeParts<a href="#formattedtimeparts" class="hash-link" aria-label="Direct link to FormattedTimeParts" title="Direct link to FormattedTimeParts"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts" target="_blank" rel="noopener noreferrer">Intl.DateTimeFormat.prototype.formatToParts</a> which is not available in IE11. Please use our <a href="/docs/polyfills/intl-datetimeformat">polyfill</a> if you plan to support IE11.</p></div></div>
<p>This component provides more customization to <code>FormattedTime</code> by allowing children function to have access to underlying parts of the formatted date. The available parts are listed <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts" target="_blank" rel="noopener noreferrer">here</a></p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DateTimeFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">parts</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DateTimeFormatPart</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedTimeParts</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1459832991883</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedTimeParts</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formatteddatetimerange">FormattedDateTimeRange<a href="#formatteddatetimerange" class="hash-link" aria-label="Direct link to FormattedDateTimeRange" title="Direct link to FormattedDateTimeRange"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires stage-3 API <a href="https://github.com/tc39/proposal-intl-DateTimeFormat-formatRange" target="_blank" rel="noopener noreferrer">Intl.RelativeTimeFormat.prototype.formatRange</a> which has limited browser support. Please use our <a href="/docs/polyfills/intl-datetimeformat">polyfill</a> if you plan to support them.</p></div></div>
<p>This component uses the <a href="/docs/react-intl/api#formatdatetimerange"><code>formatDateTimeRange</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener noreferrer"><code>Intl.DateTimeFormat</code></a> APIs and has <code>props</code> that correspond to the <code>DateTimeFormatOptions</code> specified above</p>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">DateTimeFormatOptions</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> from</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(255, 203, 107)">Date</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> to</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(255, 203, 107)">Date</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedDate</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedDateTimeRange></code> will render the formatted time into a <code>React.Fragment</code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDateTimeRange</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">from</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'2020-1-1'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">to</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript keyword" style="color:rgb(127, 219, 202)">new</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript class-name" style="color:rgb(255, 203, 139)">Date</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'2020-1-15'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedrelativetime">FormattedRelativeTime<a href="#formattedrelativetime" class="hash-link" aria-label="Direct link to FormattedRelativeTime" title="Direct link to FormattedRelativeTime"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat" target="_blank" rel="noopener noreferrer">Intl.RelativeTimeFormat</a> which has limited browser support. Please use our <a href="/docs/polyfills/intl-relativetimeformat">polyfill</a> if you plan to support them.</p></div></div>
<p>This component uses the <a href="/docs/react-intl/api#formatrelativetime"><code>formatRelativeTime</code></a> API and has <code>props</code> that correspond to the following relative formatting options:</p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">RelativeTimeFormatOptions</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> numeric</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'always'</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'auto'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> style</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'long'</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'short'</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'narrow'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Prop Types:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> RelativeTimeFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> unit</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Unit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> updateIntervalInSeconds</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedDate</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedRelativeTime></code> will render the formatted relative time into a <code>React.Fragment</code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedRelativeTime</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">0</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">numeric</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">auto</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">updateIntervalInSeconds</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<div class="theme-admonition theme-admonition-info admonition_TlAY alert alert--info"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>maximum interval</div><div class="admonitionContent_aVAQ"><p>You can adjust the maximum interval that the component will re-render by setting the <code>updateIntervalInSeconds</code>. A falsy value will turn off auto-updating. The updating is smart and will schedule the next update for the next <em>interesting moment</em>.</p></div></div>
<p>An <em>interesting moment</em> is defined as the next non-fractional <code>value</code> for that <code>unit</code>. For example:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedRelativeTime</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">-</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">50</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">updateIntervalInSeconds</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p>This will initially renders <code>59 seconds ago</code>, after 1 second, will render <code>1 minute ago</code>, and will not re-render until a full minute goes by, it'll render <code>2 minutes ago</code>. It will not try to render <code>1.2 minutes ago</code>.</p>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>limitation</div><div class="admonitionContent_aVAQ"><p><code>updateIntervalInSeconds</code> cannot be enabled for <code>unit</code> longer than <code>hour</code> (so not for <code>day</code>, <code>week</code>, <code>quarter</code>, <code>year</code>). This is primarily because it doesn't make sense to schedule a timeout in <code>day</code>s, and the number of <code>ms</code> in a day is larger than the max timeout that <code>setTimeout</code> accepts.</p></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattednumber">FormattedNumber<a href="#formattednumber" class="hash-link" aria-label="Direct link to FormattedNumber" title="Direct link to FormattedNumber"></a></h2>
<p>This component uses the <a href="/docs/react-intl/api#formatnumber"><code>formatNumber</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank" rel="noopener noreferrer"><code>Intl.NumberFormat</code></a> APIs and has <code>props</code> that correspond to <code>Intl.NumberFormatOptions</code>.</p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> NumberFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedNumber</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedNumber></code> will render the formatted number into a <code>React.Fragment</code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumber</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p><strong>Example Formatting Currency Values</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumber</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag special-attr attr-name" style="color:rgb(173, 219, 103);font-style:italic">style</span><span class="token tag special-attr attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag special-attr attr-value value css language-css" style="color:rgb(127, 219, 202)">currency</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">currency</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">USD</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p><strong>Formatting Number using <code>unit</code></strong></p>
<p>Currently this is part of ES2020 <a href="https://tc39.es/ecma402/#numberformat-objects" target="_blank" rel="noopener noreferrer">NumberFormat</a>.
We've provided a polyfill <a href="/docs/polyfills/intl-numberformat">here</a> and <code>react-intl</code> types allow users to pass
in a <a href="/docs/polyfills/intl-numberformat#SupportedUnits">sanctioned unit</a>. For example:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumber</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag special-attr attr-name" style="color:rgb(173, 219, 103);font-style:italic">style</span><span class="token tag special-attr attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag special-attr attr-value value css language-css" style="color:rgb(127, 219, 202)">unit</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">unit</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">kilobyte</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">unitDisplay</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">narrow</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumber</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">unit</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">fahrenheit</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">unitDisplay</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">long</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag special-attr attr-name" style="color:rgb(173, 219, 103);font-style:italic">style</span><span class="token tag special-attr attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag special-attr attr-value value css language-css" style="color:rgb(127, 219, 202)">unit</span><span class="token tag special-attr attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattednumberparts">FormattedNumberParts<a href="#formattednumberparts" class="hash-link" aria-label="Direct link to FormattedNumberParts" title="Direct link to FormattedNumberParts"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts" target="_blank" rel="noopener noreferrer">Intl.NumberFormat.prototype.formatToParts</a> which is not available in IE11. Please use our <a href="/docs/polyfills/intl-numberformat">polyfill</a> if you plan to support IE11.</p></div></div>
<p>This component provides more customization to <code>FormattedNumber</code> by allowing children function to have access to underlying parts of the formatted number. The available parts are listed <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts" target="_blank" rel="noopener noreferrer">here</a>.</p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> NumberFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> format</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">parts</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Intl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">NumberFormatPart</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumberParts</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">1000</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedNumberParts</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedplural">FormattedPlural<a href="#formattedplural" class="hash-link" aria-label="Direct link to FormattedPlural" title="Direct link to FormattedPlural"></a></h2>
<p>This component uses the <a href="/docs/react-intl/api#formatplural"><code>formatPlural</code></a> API and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules" target="_blank" rel="noopener noreferrer"><code>Intl.PluralRules</code></a> has <code>props</code> that correspond to <code>Intl.PluralRulesOptions</code>.</p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> PluralFormatOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> other</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> zero</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> one</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> two</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> few</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> many</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">formattedPlural</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>By default <code><FormattedPlural></code> will select a <a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html" target="_blank" rel="noopener noreferrer">plural category</a> (<code>zero</code>, <code>one</code>, <code>two</code>, <code>few</code>, <code>many</code>, or <code>other</code>) and render the corresponding React element into a <code>React.Fragment</code>. If you need to customize rendering, you can either wrap it with another React element (recommended), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedPlural</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript number" style="color:rgb(247, 140, 108)">10</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">one</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">message</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">other</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">messages</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedlist">FormattedList<a href="#formattedlist" class="hash-link" aria-label="Direct link to FormattedList" title="Direct link to FormattedList"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat" target="_blank" rel="noopener noreferrer">Intl.ListFormat</a> which has limited browser support. Please use our <a href="/docs/polyfills/intl-listformat">polyfill</a> if you plan to support them.</p></div></div>
<p>This component uses <a href="/docs/react-intl/api#formatlist"><code>formatList</code></a> API and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat" target="_blank" rel="noopener noreferrer">Intl.ListFormat</a>. Its props corresponds to <code>Intl.ListFormatOptions</code>.</p>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">ListFormatOptions</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">chunksOrString</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Example:</strong></p>
<p>When the locale is <code>en</code>:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedList</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">conjunction</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'Me'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'myself'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'I'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedList</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">conjunction</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'Me'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)">myself</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'I'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedlistparts">FormattedListParts<a href="#formattedlistparts" class="hash-link" aria-label="Direct link to FormattedListParts" title="Direct link to FormattedListParts"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat" target="_blank" rel="noopener noreferrer">Intl.ListFormat</a> which has limited browser support. Please use our <a href="/docs/polyfills/intl-listformat">polyfill</a> if you plan to support them.</p></div></div>
<p>This component uses <a href="/docs/react-intl/api#formatlisttoparts"><code>formatListToParts</code></a> API and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat" target="_blank" rel="noopener noreferrer">Intl.ListFormat</a>. Its props corresponds to <code>Intl.ListFormatOptions</code>.</p>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">ListFormatOptions</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">chunks</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(255, 203, 107)">Array</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access maybe-class-name">ReactElement</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Example:</strong></p>
<p>When the locale is <code>en</code>:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedListParts</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">conjunction</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'Me'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'myself'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'I'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">parts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">small</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedListParts</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formatteddisplayname">FormattedDisplayName<a href="#formatteddisplayname" class="hash-link" aria-label="Direct link to FormattedDisplayName" title="Direct link to FormattedDisplayName"></a></h2>
<div class="theme-admonition theme-admonition-caution admonition_TlAY alert alert--warning"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>browser support</div><div class="admonitionContent_aVAQ"><p>This requires <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames" target="_blank" rel="noopener noreferrer">Intl.DisplayNames</a> which has limited browser support. Please use our <a href="/docs/polyfills/intl-displaynames">polyfill</a> if you plan to support them.</p></div></div>
<p>This component uses <a href="/docs/react-intl/api#formatdisplayname"><code>formatDisplayName</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames" target="_blank" rel="noopener noreferrer"><code>Intl.DisplayNames</code></a>
has <code>props</code> that correspond to <code>DisplayNameOptions</code>. You might need a <a href="/docs/polyfills/intl-displaynames">polyfill</a>.</p>
<p><strong>Props:</strong></p>
<div class="language-ts codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-ts codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> FormatDisplayNameOptions </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">|</span><span class="token plain"> Record</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">unknown</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Example:</strong></p>
<p>When the locale is <code>en</code>:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDisplayName</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">language</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">zh-Hans-SG</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedDisplayName</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">currency</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">value</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">JPY</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formattedmessage">FormattedMessage<a href="#formattedmessage" class="hash-link" aria-label="Direct link to FormattedMessage" title="Direct link to FormattedMessage"></a></h2>
<p>This component uses the <a href="/docs/react-intl/api#formatmessage"><code>formatMessage</code></a> API and has <code>props</code> that correspond to a <a href="#message-descriptor">Message Descriptor</a>.</p>
<p><strong>Props:</strong></p>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">props</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">MessageDescriptor</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> object</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> tagName</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">children</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">chunks</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(137, 221, 255)">=></span><span class="token plain"> </span><span class="token maybe-class-name">ReactElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="message-syntax">Message Syntax<a href="#message-syntax" class="hash-link" aria-label="Direct link to Message Syntax" title="Direct link to Message Syntax"></a></h3>
<p>String/Message formatting is a paramount feature of React Intl and it builds on <a href="https://unicode-org.github.io/icu/userguide/format_parse/messages" target="_blank" rel="noopener noreferrer">ICU Message Formatting</a> by using the <a href="/docs/core-concepts/icu-syntax">ICU Message Syntax</a>. This message syntax allows for simple to complex messages to be defined, translated, and then formatted at runtime.</p>
<p><strong>Simple Message:</strong></p>
<div class="codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-text codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">Hello, {name}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>Complex Message:</strong></p>
<div class="codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-text codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token plain">Hello, {name}, you have {itemCount, plural,</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> =0 {no items}</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> one {# item}</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> other {# items}</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">}.</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>See:</strong> The <a href="/docs/core-concepts/icu-syntax">Message Syntax Guide</a>.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="message-descriptor">Message Descriptor<a href="#message-descriptor" class="hash-link" aria-label="Direct link to Message Descriptor" title="Direct link to Message Descriptor"></a></h3>
<p>React Intl has a Message Descriptor concept which is used to define your app's default messages/strings. <code><FormattedMessage></code> have props which correspond to a Message Descriptor. The Message Descriptors work very well for providing the data necessary for having the strings/messages translated, and they contain the following properties:</p>
<ul>
<li><strong><code>id</code>:</strong> A unique, stable identifier for the message</li>
<li><strong><code>description</code>:</strong> Context for the translator about how it's used in the UI</li>
<li><strong><code>defaultMessage</code>:</strong> The default message (probably in English)</li>
</ul>
<div class="language-tsx codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-tsx codeBlock_hT0A thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_WFJW"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">MessageDescriptor</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> id</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> defaultMessage</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> description</span><span class="token operator" style="color:rgb(137, 221, 255)">?</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup_hsPw"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_E8d8" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_b6gX"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_OsnH"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-info admonition_TlAY alert alert--info"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>compile message descriptors</div><div class="admonitionContent_aVAQ"><p>The <a href="/docs/tooling/babel-plugin">babel-plugin-formatjs</a> and <a href="/docs/tooling/ts-transformer">@formatjs/ts-transformer</a> packages can be used to compile Message Descriptors defined in JavaScript source files into AST for performance.</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="message-formatting-fallbacks">Message Formatting Fallbacks<a href="#message-formatting-fallbacks" class="hash-link" aria-label="Direct link to Message Formatting Fallbacks" title="Direct link to Message Formatting Fallbacks"></a></h3>
<p>The message formatting APIs go the extra mile to provide fallbacks for the common situations where formatting fails; at the very least a non-empty string should always be returned. Here's the message formatting fallback algorithm:</p>
<ol>
<li>Lookup and format the translated message at <code>id</code>, passed to <a href="#intlprovider"><code><IntlProvider></code></a>.</li>
<li>Fallback to formatting the <code>defaultMessage</code>.</li>
<li>Fallback to translated message at <code>id</code>'s source.</li>
<li>Fallback to <code>defaultMessage</code> source.</li>
<li>Fallback to the literal message <code>id</code>.</li>
</ol>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h3>
<p>By default <code><FormattedMessage></code> will render the formatted string into a <code><React.Fragment></code>. If you need to customize rendering, you can either wrap it with another React element (recommended), specify a different <code>tagName</code> (e.g., <code>'div'</code>), or pass a function as the child.</p>
<p><strong>Example:</strong></p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">app.greeting</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">description</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">Greeting to welcome the user to the app</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">defaultMessage</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">Hello, {name}!</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">values</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> name</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript string" style="color:rgb(173, 219, 103)">'Eric'</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p><strong>Example:</strong> function as the child</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">title</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">txt </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">h1</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">txt</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">h1</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<div class="theme-admonition theme-admonition-info admonition_TlAY alert alert--info"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>simple message</div><div class="admonitionContent_aVAQ"><p>Messages can be simple strings <em>without</em> placeholders, and that's the most common type of message. This case is highly-optimized, but still has the benefits of the <a href="#message-formatting-fallbacks">fallback procedure</a>.</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="rich-text-formatting">Rich Text Formatting<a href="#rich-text-formatting" class="hash-link" aria-label="Direct link to Rich Text Formatting" title="Direct link to Rich Text Formatting"></a></h3>
<p><code><FormattedMessage></code> also supports rich-text formatting by specifying a XML tag in the message & resolving that tag in the <code>values</code> prop. Here's an example:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">app.greeting</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">description</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">Greeting to welcome the user to the app</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">defaultMessage</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">Hello, <b>Eric</b> {icon}</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">values</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript function-variable function" style="color:rgb(130, 170, 255)">b</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> chunks </span><span class="token tag script language-javascript arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">chunks</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">b</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> icon</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">svg</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">/></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p>By allowing embedding XML tag we want to make sure contextual information is not lost when you need to style part of the string. In a more complicated example like:</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">foo</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">defaultMessage</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta></span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">values</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript function-variable function" style="color:rgb(130, 170, 255)">a</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> chunks </span><span class="token tag script language-javascript arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">a</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">class</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">external_link</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">target</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">_blank</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">href</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">https://www.example.com/shoe</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">chunks</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">a</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript function-variable function" style="color:rgb(130, 170, 255)">cta</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> chunks </span><span class="token tag script language-javascript arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">strong</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">class</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">important</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">chunks</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">strong</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="function-as-the-child">Function as the child<a href="#function-as-the-child" class="hash-link" aria-label="Direct link to Function as the child" title="Direct link to Function as the child"></a></h3>
<p>Since rich text formatting allows embedding <code>ReactElement</code>, in function as the child scenario, the function will receive the formatted message chunks as a single parameter.</p>
<div class="playgroundHeader_qwyd playgroundEditorHeader_nLzM">Live Editor</div><div class="playgroundEditor_PvJ1"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:inherit;color:#d6deeb;background-color:#011627" spellcheck="false"><span class="token-line" style="color:#d6deeb"><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">id</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">foo</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">defaultMessage</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta></span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">values</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript function-variable function" style="color:rgb(130, 170, 255)">a</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> chunks </span><span class="token tag script language-javascript arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">a</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">class</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">external_link</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">target</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">_blank</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">href</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">https://www.example.com/shoe</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">chunks</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript plain-text" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">a</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript function-variable function" style="color:rgb(130, 170, 255)">cta</span><span class="token tag script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> chunks </span><span class="token tag script language-javascript arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">strong</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">class</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag attr-value" style="color:rgb(127, 219, 202)">important</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">chunks</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag script language-javascript tag" style="color:rgb(127, 219, 202)">strong</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)"> </span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token tag" style="color:rgb(127, 219, 202)"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">chunks </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(127, 219, 202)">h2</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">chunks</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(127, 219, 202)">h2</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain-text"></span>
</span><span class="token-line" style="color:#d6deeb"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">FormattedMessage</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span>
</span></pre></div><div class="playgroundHeader_qwyd playgroundPreviewHeader_vpQ2">Result</div><div class="playgroundPreview_bb8I"><div></div></div>
<p>All the rich text gets translated together which yields higher quality output. This brings feature-parity with other translation libs as well, such as <a href="https://projectfluent.org/" target="_blank" rel="noopener noreferrer">fluent</a> by Mozilla (using <code>overlays</code> concept).</p>
<p>Extending this also allows users to potentially utilizing other rich text format, like <a href="https://daringfireball.net/projects/markdown/" target="_blank" rel="noopener noreferrer">Markdown</a>.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/formatjs/formatjs/edit/main/website/docs/react-intl/components.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_sGTD" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_rcyb"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-03-25T12:36:22.000Z" itemprop="dateModified">Mar 25, 2025</time></b> by <b>renovate[bot]</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/react-intl"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Overview</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/react-intl/api"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Imperative API</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_m4Dn thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#why-components" class="table-of-contents__link toc-highlight">Why Components?</a></li><li><a href="#intlprovider" class="table-of-contents__link toc-highlight">IntlProvider</a><ul><li><a href="#locale-formats-and-messages" class="table-of-contents__link toc-highlight">locale, formats, and messages</a></li><li><a href="#defaultlocale-and-defaultformats" class="table-of-contents__link toc-highlight">defaultLocale and defaultFormats</a></li><li><a href="#textcomponent" class="table-of-contents__link toc-highlight">textComponent</a></li><li><a href="#onerror" class="table-of-contents__link toc-highlight">onError</a></li><li><a href="#onwarn" class="table-of-contents__link toc-highlight">onWarn</a></li><li><a href="#wraprichtextchunksinfragment" class="table-of-contents__link toc-highlight">wrapRichTextChunksInFragment</a></li><li><a href="#defaultrichtextelements" class="table-of-contents__link toc-highlight">defaultRichTextElements</a></li></ul></li><li><a href="#rawintlprovider" class="table-of-contents__link toc-highlight">RawIntlProvider</a></li><li><a href="#formatteddate" class="table-of-contents__link toc-highlight">FormattedDate</a></li><li><a href="#formatteddateparts" class="table-of-contents__link toc-highlight">FormattedDateParts</a></li><li><a href="#formattedtime" class="table-of-contents__link toc-highlight">FormattedTime</a></li><li><a href="#formattedtimeparts" class="table-of-contents__link toc-highlight">FormattedTimeParts</a></li><li><a href="#formatteddatetimerange" class="table-of-contents__link toc-highlight">FormattedDateTimeRange</a></li><li><a href="#formattedrelativetime" class="table-of-contents__link toc-highlight">FormattedRelativeTime</a></li><li><a href="#formattednumber" class="table-of-contents__link toc-highlight">FormattedNumber</a></li><li><a href="#formattednumberparts" class="table-of-contents__link toc-highlight">FormattedNumberParts</a></li><li><a href="#formattedplural" class="table-of-contents__link toc-highlight">FormattedPlural</a></li><li><a href="#formattedlist" class="table-of-contents__link toc-highlight">FormattedList</a></li><li><a href="#formattedlistparts" class="table-of-contents__link toc-highlight">FormattedListParts</a></li><li><a href="#formatteddisplayname" class="table-of-contents__link toc-highlight">FormattedDisplayName</a></li><li><a href="#formattedmessage" class="table-of-contents__link toc-highlight">FormattedMessage</a><ul><li><a href="#message-syntax" class="table-of-contents__link toc-highlight">Message Syntax</a></li><li><a href="#message-descriptor" class="table-of-contents__link toc-highlight">Message Descriptor</a></li><li><a href="#message-formatting-fallbacks" class="table-of-contents__link toc-highlight">Message Formatting Fallbacks</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li><li><a href="#rich-text-formatting" class="table-of-contents__link toc-highlight">Rich Text Formatting</a></li><li><a href="#function-as-the-child" class="table-of-contents__link toc-highlight">Function as the child</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started/installation">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/polyfills">Polyfills</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/intl-messageformat">Libraries</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tooling/cli">Tooling</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/formatjs" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_C4lv"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://formatjs.slack.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_C4lv"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Social</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/formatjs/formatjs" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_C4lv"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 FormatJS. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>