Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/recontentapp/example-reactjs-i18n
A support repository for a blog post on i18n in a React.js app
https://github.com/recontentapp/example-reactjs-i18n
i18next localization reactjs
Last synced: about 13 hours ago
JSON representation
A support repository for a blog post on i18n in a React.js app
- Host: GitHub
- URL: https://github.com/recontentapp/example-reactjs-i18n
- Owner: recontentapp
- License: mit
- Created: 2023-01-22T09:52:10.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-12T10:10:04.000Z (almost 2 years ago)
- Last Synced: 2023-07-12T17:24:12.985Z (over 1 year ago)
- Topics: i18next, localization, reactjs
- Language: TypeScript
- Homepage: https://recontent.app
- Size: 169 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# I18n in a React.js app
> Looking for a way to streamline collaboration with designers & product managers on content? Tired of making PRs to fix typos in JSON files? Checkout [Recontent.app](https://recontent.app?utm_source=github) to ship localized content faster.
## Installation
```sh
git clone [email protected]:recontentapp/example-reactjs-i18n.git
cd example-reactjs-i18n
yarn
yarn start
```
## Adding translations
Translations are stored in JSON files in the `src/i18n/locales` folder. Each piece of content needs to be referenced in all supported locales.
The `t` function is typed to prevent using unknown paths within a locale file. The `en-GB` file is used as a reference of available paths.
## Adding new languages
1. Update the `Language` type in `src/i18n/types.ts` & `languagesLabels` constant in `src/i18n/constants.ts` with the locale you want to support
2. Add a new JSON file in the `src/i18n/locales` folder which matches the added locale name
3. Import the added JSON file in `src/i18n/config.ts` & reference it in the `resources` constant
4. You can now switch your app in that locale
## Testing components which rely on translations
You can find an example of such test in `src/components/HelpButton.spec.tsx`.
As `i18next` is not set up in the test environment, make sure to update mocks declared `src/setupTests.ts` if you rely on new functions/logic from `i18next` or `react-i18next`.
## Lazy-loading translations
Translations files tend to grow exponentially as you add new features to your app.
Instead of relying on a single `i18next` [namespace](https://react.i18next.com/guides/multiple-translation-files) which contains all your translations, you can split them in smaller files based on routes (eg. Dashboard) or areas of your app (eg. Admin panel, Public view).