-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
174 lines (174 loc) · 97.1 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
<!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" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.7.0">
<title data-rh="true">Overview | 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"><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="Overview | Format.JS"><meta data-rh="true" name="description" content="npm Version"><meta data-rh="true" property="og:description" content="npm Version"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://formatjs.github.io/docs/react-intl"><link data-rh="true" rel="alternate" href="https://formatjs.github.io/docs/react-intl" hreflang="en"><link data-rh="true" rel="alternate" href="https://formatjs.github.io/docs/react-intl" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.ca54e791.css">
<script src="/assets/js/runtime~main.3055028e.js" defer="defer"></script>
<script src="/assets/js/main.3cb183a0.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 menu__link--active" aria-current="page" 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" 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">Overview</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>Overview</h1></header><p><a href="https://www.npmjs.org/package/react-intl" target="_blank" rel="noopener noreferrer"><img decoding="async" loading="lazy" src="https://img.shields.io/npm/v/react-intl.svg?style=flat-square" alt="npm Version" class="img_IIlM"></a></p>
<p><strong>Welcome to React Intl's docs! This is the place to find React Intl's docs</strong>. Feel free to open a pull request and contribute to the docs to make them better.</p>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="runtime-requirements">Runtime Requirements<a href="#runtime-requirements" class="hash-link" aria-label="Direct link to Runtime Requirements" title="Direct link to Runtime Requirements"></a></h2>
<p><strong>We support IE11 & 2 most recent versions of Edge, Chrome, Firefox & Safari.</strong></p>
<p>React Intl relies on these <code>Intl</code> APIs:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank" rel="noopener noreferrer">Intl.NumberFormat</a>: Available on IE11+</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener noreferrer">Intl.DateTimeFormat</a>: Available on IE11+</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules" target="_blank" rel="noopener noreferrer">Intl.PluralRules</a>: This can be polyfilled using <a href="/docs/polyfills/intl-pluralrules">this package</a>.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat" target="_blank" rel="noopener noreferrer">Intl.RelativeTimeFormat</a>: This can be polyfilled using <a href="/docs/polyfills/intl-relativetimeformat">this package</a>.</li>
<li>(Optional) <a href="https://tc39.es/proposal-intl-displaynames/" target="_blank" rel="noopener noreferrer">Intl.DisplayNames</a>: Required if you use <a href="/docs/react-intl/api#formatdisplayname"><code>formatDisplayName</code></a>
or <a href="/docs/react-intl/components#formatteddisplayname"><code>FormattedDisplayName</code></a>. This can be polyfilled using <a href="/docs/polyfills/intl-displaynames">this package</a>.</li>
</ul>
<p>If you need to support older browsers, we recommend you do the following:</p>
<ol>
<li>
<p>If you're supporting browsers that do not have <code>Intl</code>, include this <a href="/docs/polyfills/intl-getcanonicallocales">polyfill</a> in your build.</p>
</li>
<li>
<p>Polyfill <code>Intl.NumberFormat</code> with <a href="/docs/polyfills/intl-numberformat"><code>@formatjs/intl-numberformat</code></a>.</p>
</li>
<li>
<p>Polyfill <code>Intl.DateTimeFormat</code> with <a href="/docs/polyfills/intl-datetimeformat"><code>@formatjs/intl-datetimeformat</code></a></p>
</li>
<li>
<p>If you're supporting browsers that do not have <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> (e.g IE11 & Safari 12-), include this <a href="/docs/polyfills/intl-pluralrules">polyfill</a> in your build.</p>
</li>
<li>
<p>If you're supporting browsers that do not have <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat" target="_blank" rel="noopener noreferrer">Intl.RelativeTimeFormat</a> (e.g IE11, Edge, Safari 12-), include this <a href="/docs/polyfills/intl-relativetimeformat">polyfill</a> in your build along with individual CLDR data for each locale you support.</p>
</li>
<li>
<p>If you need <code>Intl.DisplayNames</code>, include this <a href="/docs/polyfills/intl-displaynames">polyfill</a> in your build along with individual CLDR data for each locale you support.</p>
</li>
</ol>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="nodejs">Node.js<a href="#nodejs" class="hash-link" aria-label="Direct link to Node.js" title="Direct link to Node.js"></a></h3>
<h4 class="anchor anchorWithStickyNavbar_L1Bs" id="full-icu">full-icu<a href="#full-icu" class="hash-link" aria-label="Direct link to full-icu" title="Direct link to full-icu"></a></h4>
<p>Starting with Node.js 13.0.0 full-icu is supported by default.</p>
<p>If using React Intl in an earlier version of Node.js, your <code>node</code> binary has to either:</p>
<ul>
<li>Get compiled with <code>full-icu</code> using these <a href="https://nodejs.org/api/intl.html" target="_blank" rel="noopener noreferrer">instructions</a></li>
</ul>
<p><strong>OR</strong></p>
<ul>
<li>Uses <a href="https://www.npmjs.com/package/full-icu" target="_blank" rel="noopener noreferrer"><code>full-icu</code> npm package</a></li>
</ul>
<p>If your <code>node</code> version is missing any of the <code>Intl</code> APIs above, you'd have to polyfill them accordingly.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="react-native">React Native<a href="#react-native" class="hash-link" aria-label="Direct link to React Native" title="Direct link to React Native"></a></h3>
<p>If you're using <code>react-intl</code> in React Native, make sure your runtime has built-in <code>Intl</code> support (similar to <a href="https://github.com/react-native-community/jsc-android-buildscripts#international-variant" target="_blank" rel="noopener noreferrer">JSC International variant</a>). See these issues for more details:</p>
<ul>
<li><a href="https://github.com/formatjs/formatjs/issues/1356" target="_blank" rel="noopener noreferrer">https://github.com/formatjs/formatjs/issues/1356</a></li>
<li><a href="https://github.com/formatjs/formatjs/issues/992" target="_blank" rel="noopener noreferrer">https://github.com/formatjs/formatjs/issues/992</a></li>
</ul>
<h4 class="anchor anchorWithStickyNavbar_L1Bs" id="react-native-on-ios">React Native on iOS<a href="#react-native-on-ios" class="hash-link" aria-label="Direct link to React Native on iOS" title="Direct link to React Native on iOS"></a></h4>
<p>If you cannot use the Intl variant of JSC (e.g on iOS), follow the instructions in <a href="#runtime-requirements">Runtime Requirements</a> to polyfill those APIs accordingly.</p>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="the-react-intl-package">The <code>react-intl</code> Package<a href="#the-react-intl-package" class="hash-link" aria-label="Direct link to the-react-intl-package" title="Direct link to the-react-intl-package"></a></h2>
<p>Install the <a href="https://www.npmjs.com/package/react-intl" target="_blank" rel="noopener noreferrer"><code>react-intl</code> npm package</a> via npm:</p>
<!-- -->
<div class="tabs-container tabList_YESZ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_xkch tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_xkch">yarn</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_HWzn"><div class="language-sh codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-sh 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">npm i -S react-intl</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><div role="tabpanel" class="tabItem_HWzn" hidden=""><div class="language-sh codeBlockContainer_uFXv theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_IIrp"><pre tabindex="0" class="prism-code language-sh 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">yarn add react-intl</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></div></div>
<p>The <code>react-intl</code> npm package distributes the following modules (links from <a href="https://unpkg.com/" target="_blank" rel="noopener noreferrer">unpkg</a>):</p>
<ul>
<li><a href="https://unpkg.com/react-intl@latest/index.js" target="_blank" rel="noopener noreferrer"><strong>CommonJS</strong></a>:
unbundled dependencies, <code>"main"</code> in <code>package.json</code>, warnings in dev.</li>
<li><a href="https://unpkg.com/react-intl@latest/lib/index.js" target="_blank" rel="noopener noreferrer"><strong>ES6</strong></a>:
unbundled dependencies, <code>"module"</code> in <code>package.json</code>, warnings in dev.</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="module-bundlers">Module Bundlers<a href="#module-bundlers" class="hash-link" aria-label="Direct link to Module Bundlers" title="Direct link to Module Bundlers"></a></h3>
<p>We've made React Intl work well with module bundlers like: Browserify, Webpack, or Rollup which can be used to bundle React Intl for the browser:</p>
<ul>
<li>
<p>The <code>"browser"</code> field in <code>package.json</code> is specified so that only basic English locale data is included when bundling. This way when using the <code>"main"</code> module in Node all locale data is loaded, but ignored when bundled for the browser.</p>
</li>
<li>
<p>An ES6 version of React Intl is provided as <code>"jsnext:main"</code> and <code>"module"</code> in <code>package.json</code> and can be used with Rollup.</p>
</li>
<li>
<p>Development-time warnings are wrapped with <code>process.env.NODE_ENV !== 'production'</code>, this allows you to specify <code>NODE_ENV</code> when bundling and minifying to have these code blocks removed.</p>
</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="the-react-intl-module">The React Intl Module<a href="#the-react-intl-module" class="hash-link" aria-label="Direct link to The React Intl Module" title="Direct link to The React Intl Module"></a></h2>
<p>Whether you use the ES6, CommonJS, or UMD version of React Intl, they all provide the same named exports:</p>
<ul>
<li><a href="/docs/react-intl/api#injectintl"><code>injectIntl</code></a></li>
<li><a href="/docs/react-intl/api#definemessages"><code>defineMessages</code></a></li>
<li><a href="/docs/react-intl/components#intlprovider"><code>IntlProvider</code></a></li>
<li><a href="/docs/react-intl/components#formatteddate"><code>FormattedDate</code></a></li>
<li><a href="/docs/react-intl/components#formattedtime"><code>FormattedTime</code></a></li>
<li><a href="/docs/react-intl/components#formattedrelativetime"><code>FormattedRelativeTime</code></a></li>
<li><a href="/docs/react-intl/components#formattednumber"><code>FormattedNumber</code></a></li>
<li><a href="/docs/react-intl/components#formattedplural"><code>FormattedPlural</code></a></li>
<li><a href="/docs/react-intl/components#formattedmessage"><code>FormattedMessage</code></a></li>
</ul>
<div class="theme-admonition theme-admonition-danger admonition_TlAY alert alert--danger"><div class="admonitionHeading_uh0u"><span class="admonitionIcon_Sjc1"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>react</div><div class="admonitionContent_aVAQ"><p>When using the UMD version of React Intl <em>without</em> a module system, it will expect <code>react</code> to exist on the global variable: <strong><code>React</code></strong>, and put the above named exports on the global variable: <strong><code>ReactIntl</code></strong>.</p></div></div>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="creating-an-i18n-context">Creating an I18n Context<a href="#creating-an-i18n-context" class="hash-link" aria-label="Direct link to Creating an I18n Context" title="Direct link to Creating an I18n Context"></a></h2>
<p>Now with React Intl and its locale data loaded an i18n context can be created for your React app.</p>
<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>
<p><strong>All apps using React Intl must use the <a href="/docs/react-intl/components#intlprovider"><code><IntlProvider></code> component</a>.</strong></p>
<p>The most common usage is to wrap your root React component with <code><IntlProvider></code> and configure it with the user's current locale and the corresponding translated strings/messages:</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 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" style="color:rgb(255, 85, 114)">usersLocale</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 attr-name" style="color:rgb(255, 203, 107)">messages</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)">translationsForUsersLocale</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 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><strong>See:</strong> The <a href="/docs/react-intl/components#intlprovider"><strong><code><IntlProvider></code> docs</strong></a> for more details.</p>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="formatting-data">Formatting Data<a href="#formatting-data" class="hash-link" aria-label="Direct link to Formatting Data" title="Direct link to Formatting Data"></a></h2>
<p>React Intl has two ways to format data, through <a href="/docs/react-intl/components">React components</a> and its <a href="/docs/react-intl/api">API</a>. The components provide an idiomatic-React way of integrating internationalization into a React app, and the <code><Formatted*></code> components have <a href="/docs/react-intl/components#why-components">benefits</a> over always using the imperative API directly. The API should be used when your React component needs to format data to a string value where a React element is not suitable; e.g., a <code>title</code> or <code>aria</code> attribute, or for side-effect in <code>componentDidMount</code>.</p>
<p>React Intl's imperative API is accessed via <a href="/docs/react-intl/api#injectintl"><strong><code>injectIntl</code></strong></a>, a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its <code>props</code>. (This is similar to the connect-to-stores pattern found in many Flux implementations.)</p>
<p>Here's an example using <code><IntlProvider></code>, <code><Formatted*></code> components, and the imperative API to setup an i18n context and format data:</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 maybe-class-name">React</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'</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 keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">ReactDOM</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-dom'</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 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 maybe-class-name">IntlProvider</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">FormattedRelative</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token imports"> useIntl</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 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"> </span><span class="token constant" style="color:rgb(130, 170, 255)">MS_IN_DAY</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 number" style="color:rgb(247, 140, 108)">1e3</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 number" style="color:rgb(247, 140, 108)">3600</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 number" style="color:rgb(247, 140, 108)">24</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"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">PostDate</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">date</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 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)">useIntl</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 keyword" style="font-style:italic">return</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)">span</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">title</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 script language-javascript method function property-access" style="color:rgb(130, 170, 255)">formatDate</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)">date</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><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)">FormattedRelativeTime</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 punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript known-class-name 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 method function property-access" style="color:rgb(130, 170, 255)">now</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(255, 85, 114)"> </span><span class="token tag script language-javascript operator" style="color:rgb(137, 221, 255)">-</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> date</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(137, 221, 255)">/</span><span class="token tag script language-javascript constant" style="color:rgb(130, 170, 255)">MS_IN_DAY</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 attr-name" style="color:rgb(255, 203, 107)">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(255, 85, 114)">day</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 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)">span</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"></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><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"> </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">post</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" style="color:rgb(255, 85, 114)">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">post</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">title</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(255, 85, 114)">h1</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)">p</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)">PostDate</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">date</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)">post</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)">date</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" style="color:rgb(255, 85, 114)">p</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 punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">post</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">body</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(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" 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 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><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)">post</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(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> title</span><span class="token tag script language-javascript operator" style="color:rgb(137, 221, 255)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'Hello, World!'</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)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> date</span><span class="token tag script language-javascript operator" style="color:rgb(137, 221, 255)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </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 script language-javascript" style="color:rgb(255, 85, 114)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> body</span><span class="token tag script language-javascript operator" style="color:rgb(137, 221, 255)">:</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">'Amazing content.'</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)"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)"> </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><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 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><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>"en-us"</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"></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)">h1</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain">Hello, World!</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(255, 85, 114)">h1</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 tag punctuation" style="color:rgb(199, 146, 234)"><</span><span class="token tag" style="color:rgb(255, 85, 114)">p</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 tag" style="color:rgb(255, 85, 114)">span</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">title</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)">4/5/2016</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 plain">yesterday</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)"></</span><span class="token tag" style="color:rgb(255, 85, 114)">span</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 tag" style="color:rgb(255, 85, 114)">p</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 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">Amazing content.</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 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>
<p><strong>See:</strong> The <a href="/docs/react-intl/api"><strong>API docs</strong></a> and <a href="/docs/react-intl/components"><strong>Component docs</strong></a> for more details.</p>
<h1>ESM Build</h1>
<p><code>react-intl</code> and its underlying libraries (<code>@formatjs/icu-messageformat-parser</code>, <code>intl-messageformat</code>, <code>@formatjs/intl-relativetimeformat</code>) export ESM artifacts. This means you should configure your build toolchain to transpile those libraries.</p>
<h3 class="anchor anchorWithStickyNavbar_L1Bs" id="jest">Jest<a href="#jest" class="hash-link" aria-label="Direct link to Jest" title="Direct link to Jest"></a></h3>
<p>Add <code>transformIgnorePatterns</code> to always include those libraries, e.g:</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"> transformIgnorePatterns</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"> </span><span class="token string" style="color:rgb(195, 232, 141)">'/node_modules/(?!intl-messageformat|@formatjs/icu-messageformat-parser).+\\.js$'</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"></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="webpack">webpack<a href="#webpack" class="hash-link" aria-label="Direct link to webpack" title="Direct link to webpack"></a></h3>
<p>If you're using <code>babel-loader</code>, or <code>ts-loader</code>, you can do 1 of the following:</p>
<ol>
<li>Add those libraries in <code>include</code>:</li>
</ol>
<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 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"> include</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"> path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'node_modules/react-intl'</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"> path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'node_modules/intl-messageformat'</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"> path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'node_modules/@formatjs/icu-messageformat-parser'</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 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>OR</p>
<ol start="2">
<li>Add those libraries in <code>exclude</code>:</li>
</ol>
<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">exclude</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token regex regex-delimiter">/</span><span class="token regex regex-source language-regex">node_modules</span><span class="token regex regex-source language-regex escape">\/</span><span class="token regex regex-source language-regex group punctuation" style="color:rgb(199, 146, 234)">(?!</span><span class="token regex regex-source language-regex">react-intl</span><span class="token regex regex-source language-regex alternation keyword" style="font-style:italic">|</span><span class="token regex regex-source language-regex">intl-messageformat</span><span class="token regex regex-source language-regex alternation keyword" style="font-style:italic">|</span><span class="token regex regex-source language-regex">@formatjs</span><span class="token regex regex-source language-regex escape">\/</span><span class="token regex regex-source language-regex">icu-messageformat-parser</span><span class="token regex regex-source language-regex group punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token regex regex-delimiter">/</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>
<h1>Core Concepts</h1>
<ul>
<li>Formatters (Date, Number, Message, Relative)</li>
<li>Provider and Injector</li>
<li>API and Components</li>
<li>Message Descriptor</li>
<li>Message Syntax</li>
<li>Defining default messages for extraction</li>
<li>Custom, named formats</li>
</ul>
<h1>Example Apps</h1>
<p>There are several <a href="https://github.com/formatjs/formatjs/tree/master/packages/react-intl/examples" target="_blank" rel="noopener noreferrer"><strong>runnable example apps</strong></a> in this Git repo. These are a great way to see React Intl's <a href="#core-concepts">core concepts</a> in action in simplified applications.</p>
<h1>API Reference</h1>
<p>There are a few API layers that React Intl provides and is built on. When using React Intl you'll be interacting with <code>Intl</code> built-ins, React Intl's API, and its React components:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank" rel="noopener noreferrer">ECMAScript Internationalization API</a></li>
<li><a href="/docs/react-intl/api">React Intl API</a></li>
<li><a href="/docs/react-intl/components">React Intl Components</a></li>
</ul>
<h1>TypeScript Usage</h1>
<p><code>react-intl</code> is written in TypeScript, thus having 1st-class TS support.</p>
<p>In order to use <code>react-intl</code> in TypeScript, make sure your <code>compilerOptions</code>'s <code>lib</code> config include <code>["esnext.intl", "es2017.intl", "es2018.intl"]</code>.</p>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="typing-message-ids-and-locale">Typing message IDs and locale<a href="#typing-message-ids-and-locale" class="hash-link" aria-label="Direct link to Typing message IDs and locale" title="Direct link to Typing message IDs and locale"></a></h2>
<p>By default, the type for the <code>id</code> prop of <code><FormattedMessage></code> and <code>formatMessage</code> is <code>string</code>. However, you can set a more restrictive type to get autocomplete and error checking. In order to do this, override the following global namespace with the union type of all of your message IDs. You can do this by including the following somewhere in your code:</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">declare</span><span class="token plain"> global </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 keyword" style="font-style:italic">namespace</span><span class="token plain"> FormatjsIntl </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 keyword" style="font-style:italic">interface</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">Message</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"> ids</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"> </span><span class="token keyword" style="font-style:italic">typeof</span><span class="token plain"> messages</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 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>Where <code>messages</code> is the object you would normally pass to <code><IntlProvider></code>, and would look something like:</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">const</span><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 plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> greeting</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)">'Hello'</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"> planet</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)">'World'</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 comment" style="color:rgb(105, 112, 152);font-style:italic">// ...</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>You can also override the following global to use a custom type for locale</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">declare</span><span class="token plain"> global </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 keyword" style="font-style:italic">namespace</span><span class="token plain"> FormatjsIntl </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 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 string" style="color:rgb(195, 232, 141)">'en'</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)">'fr'</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 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>
<h1>Advanced Usage</h1>
<p>Our <a href="/docs/guides/advanced-usage">Advanced Usage</a> has further guides for production setup in environments where performance is important.</p>
<h1>Supported Tooling</h1>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="message-extraction">Message extraction<a href="#message-extraction" class="hash-link" aria-label="Direct link to Message extraction" title="Direct link to Message extraction"></a></h2>
<p>We've built <a href="/docs/tooling/cli">@formatjs/cli</a> that helps you extract messages from a list of files. It uses <a href="/docs/tooling/babel-plugin">babel-plugin-formatjs</a> under the hood and should be able to extract messages if you're declaring using 1 of the mechanisms below:</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">defineMessages</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 function" style="color:rgb(130, 170, 255)">defineMessages</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"> foo</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 plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'foo'</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"> defaultMessage</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)">'foo'</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"> description</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)">'bar'</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"></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><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="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 maybe-class-name">FormattedMessage</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"></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)">FormattedMessage</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">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(255, 85, 114)">foo</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><span class="token tag attr-name" style="color:rgb(255, 203, 107)">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(255, 85, 114)">foo</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><span class="token tag attr-name" style="color:rgb(255, 203, 107)">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(255, 85, 114)">bar</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><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>
<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">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">Comp</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">props</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</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 keyword" style="font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">intl</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"> props</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> intl</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)">formatMessage</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 comment" style="color:rgb(105, 112, 152);font-style:italic">// The whole `intl.formatMessage` is required so we can extract</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 plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'foo'</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"> defaultMessage</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)">'foo'</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"> description</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)">'bar'</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"></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>
<h2 class="anchor anchorWithStickyNavbar_L1Bs" id="eslint-plugin">ESLint Plugin<a href="#eslint-plugin" class="hash-link" aria-label="Direct link to ESLint Plugin" title="Direct link to ESLint Plugin"></a></h2>
<p>We've also built <a href="/docs/tooling/linter">eslint-plugin-formatjs</a> that helps enforcing specific rules on your messages if your translation vendor has restrictions.</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.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-23T03:22:07.000Z" itemprop="dateModified">Mar 23, 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--next" href="/docs/react-intl/components"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Components</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="#runtime-requirements" class="table-of-contents__link toc-highlight">Runtime Requirements</a><ul><li><a href="#nodejs" class="table-of-contents__link toc-highlight">Node.js</a></li><li><a href="#react-native" class="table-of-contents__link toc-highlight">React Native</a></li></ul></li><li><a href="#the-react-intl-package" class="table-of-contents__link toc-highlight">The <code>react-intl</code> Package</a><ul><li><a href="#module-bundlers" class="table-of-contents__link toc-highlight">Module Bundlers</a></li></ul></li><li><a href="#the-react-intl-module" class="table-of-contents__link toc-highlight">The React Intl Module</a></li><li><a href="#creating-an-i18n-context" class="table-of-contents__link toc-highlight">Creating an I18n Context</a></li><li><a href="#formatting-data" class="table-of-contents__link toc-highlight">Formatting Data</a><ul><li><a href="#jest" class="table-of-contents__link toc-highlight">Jest</a></li><li><a href="#webpack" class="table-of-contents__link toc-highlight">webpack</a></li></ul></li><li><a href="#typing-message-ids-and-locale" class="table-of-contents__link toc-highlight">Typing message IDs and locale</a></li><li><a href="#message-extraction" class="table-of-contents__link toc-highlight">Message extraction</a></li><li><a href="#eslint-plugin" class="table-of-contents__link toc-highlight">ESLint Plugin</a></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>