add react-intl boilerplate

This commit is contained in:
Sam Samskies 2023-02-07 22:54:33 -06:00
parent 5ad4971fc0
commit 4dccd6d50b
No known key found for this signature in database
GPG Key ID: E3F697EE1B6EB156
4 changed files with 152 additions and 2 deletions

View File

@ -27,6 +27,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intersection-observer": "^9.4.1",
"react-intl": "^6.2.8",
"react-markdown": "^8.0.4",
"react-query": "^3.39.2",
"react-redux": "^8.0.5",

45
src/IntlProvider.tsx Normal file
View File

@ -0,0 +1,45 @@
import { type ReactNode } from 'react'
import { IntlProvider as ReactIntlProvider } from 'react-intl'
const DEFAULT_LOCALE = 'en-US'
const enMessages = {
hello: 'hello',
}
const esMessages = {
hello: 'hola',
}
const getMessages = (locale: string) => {
const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0]
switch (truncatedLocale) {
case 'en':
return enMessages
case 'es':
return esMessages
default:
return enMessages
}
}
export const IntlProvider = ({ children }: { children: ReactNode }) => {
const getLocale = () => {
if (typeof navigator === 'undefined') {
return DEFAULT_LOCALE
}
return (
(navigator.languages && navigator.languages[0]) ||
navigator.language ||
DEFAULT_LOCALE
)
}
const locale = getLocale()
return (
<ReactIntlProvider locale={locale} messages={getMessages(locale)}>
{children}
</ReactIntlProvider>
)
}

View File

@ -26,6 +26,7 @@ import HashTagsPage from "Pages/HashTagsPage";
import SearchPage from "Pages/SearchPage";
import HelpPage from "Pages/HelpPage";
import { NewUserRoutes } from "Pages/new";
import { IntlProvider } from "./IntlProvider";
/**
* HTTP query provider
@ -102,7 +103,9 @@ root.render(
<StrictMode>
<Provider store={Store}>
<QueryClientProvider client={HTTP}>
<IntlProvider>
<RouterProvider router={router} />
</IntlProvider>
</QueryClientProvider>
</Provider>
</StrictMode>

103
yarn.lock
View File

@ -1203,6 +1203,76 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@formatjs/ecma402-abstract@1.14.3":
version "1.14.3"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738"
integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==
dependencies:
"@formatjs/intl-localematcher" "0.2.32"
tslib "^2.4.0"
"@formatjs/fast-memoize@1.2.8":
version "1.2.8"
resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.8.tgz#425a69f783005f69e11f9e38a7f87f8822d330c6"
integrity sha512-PemNUObyoIZcqdQ1ixTPugzAzhEj7j6AHIyrq/qR6x5BFTvOQeXHYsVZUqBEFduAIscUaDfou+U+xTqOiunJ3Q==
dependencies:
tslib "^2.4.0"
"@formatjs/icu-messageformat-parser@2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.2.0.tgz#9221f7f4dbaf634a84e459a49017a872e708dcfa"
integrity sha512-NT/jKI9nvqNIsosTm+Cxv3BHutB1RIDFa4rAa2b664Od4sBnXtK7afXvAqNa3XDFxljKTij9Cp+kRMJbXozUww==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/icu-skeleton-parser" "1.3.18"
tslib "^2.4.0"
"@formatjs/icu-skeleton-parser@1.3.18":
version "1.3.18"
resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb"
integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
tslib "^2.4.0"
"@formatjs/intl-displaynames@6.2.4":
version "6.2.4"
resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.2.4.tgz#e2cc5f5828074f3263e44247491f2698fa4c22dd"
integrity sha512-CmTbSjnmAZHNGuA9vBkWoDHvrcrRauDb0OWc6nk2dAPtesQdadr49Q9N18fr8IV7n3rblgKiYaFVjg68UkRxNg==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/intl-localematcher" "0.2.32"
tslib "^2.4.0"
"@formatjs/intl-listformat@7.1.7":
version "7.1.7"
resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.1.7.tgz#b46fec1038ef9ca062d1e7b9b3412c2a14dca18f"
integrity sha512-Zzf5ruPpfJnrAA2hGgf/6pMgQ3tx9oJVhpqycFDavHl3eEzrwdHddGqGdSNwhd0bB4NAFttZNQdmKDldc5iDZw==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/intl-localematcher" "0.2.32"
tslib "^2.4.0"
"@formatjs/intl-localematcher@0.2.32":
version "0.2.32"
resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1"
integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ==
dependencies:
tslib "^2.4.0"
"@formatjs/intl@2.6.5":
version "2.6.5"
resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.6.5.tgz#349dc624a06978b143135201dcf63d40ba3cd816"
integrity sha512-kNH221hsdbTAMdsF6JAxSFV4N/9p5azXZvCLQBxl10Q4D2caPODLtne98gRhinIJ8Hv3djBabPdJG32OQaHuMA==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/fast-memoize" "1.2.8"
"@formatjs/icu-messageformat-parser" "2.2.0"
"@formatjs/intl-displaynames" "6.2.4"
"@formatjs/intl-listformat" "7.1.7"
intl-messageformat "10.3.0"
tslib "^2.4.0"
"@fortawesome/fontawesome-common-types@6.2.1":
version "6.2.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073"
@ -2077,7 +2147,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^18.0.26":
"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18.0.26":
version "18.0.27"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==
@ -5188,6 +5258,16 @@ internal-slot@^1.0.3, internal-slot@^1.0.4:
has "^1.0.3"
side-channel "^1.0.4"
intl-messageformat@10.3.0:
version "10.3.0"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.3.0.tgz#6a3a30882bf94dfa7014cc642c66abdafd942c0e"
integrity sha512-FKeBZKH9T2Ue4RUXCuwY/hEaRHU8cgICevlGKog0qSBuz/amtRKNBLetBLmRxiHeEkF7JBBckC+56GIwshlRwA==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/fast-memoize" "1.2.8"
"@formatjs/icu-messageformat-parser" "2.2.0"
tslib "^2.4.0"
ipaddr.js@1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@ -7968,6 +8048,22 @@ react-intersection-observer@^9.4.1:
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz#4ccb21e16acd0b9cf5b28d275af7055bef878f6b"
integrity sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==
react-intl@^6.2.8:
version "6.2.8"
resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.2.8.tgz#f61fffc14e69490607d3be9253704ac5afc49d56"
integrity sha512-Njzmbmk58rBx6i0bGQbBLYj+KbR9IXbFfbK2u0AFayjDx+VJW30MdJV6aNL9EiPaXfcOcAYm31R777e/UHWeEw==
dependencies:
"@formatjs/ecma402-abstract" "1.14.3"
"@formatjs/icu-messageformat-parser" "2.2.0"
"@formatjs/intl" "2.6.5"
"@formatjs/intl-displaynames" "6.2.4"
"@formatjs/intl-listformat" "7.1.7"
"@types/hoist-non-react-statics" "^3.3.1"
"@types/react" "16 || 17 || 18"
hoist-non-react-statics "^3.3.2"
intl-messageformat "10.3.0"
tslib "^2.4.0"
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9181,6 +9277,11 @@ tslib@^2.0.3:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
tslib@^2.4.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"