https://github.com/rwieruch/react-i18n-example
React i18n Example with react-i18next
https://github.com/rwieruch/react-i18n-example
i18n i18next i18next-backend react react-i18n react-i18next reactjs
Last synced: 2 months ago
JSON representation
React i18n Example with react-i18next
- Host: GitHub
- URL: https://github.com/rwieruch/react-i18n-example
- Owner: rwieruch
- Created: 2020-02-05T12:36:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T08:19:00.000Z (over 5 years ago)
- Last Synced: 2025-07-21T22:09:30.710Z (3 months ago)
- Topics: i18n, i18next, i18next-backend, react, react-i18n, react-i18next, reactjs
- Language: JavaScript
- Homepage: https://www.robinwieruch.de
- Size: 131 KB
- Stars: 27
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# react-i18next example
- https://github.com/i18next/react-i18next
- https://www.npmjs.com/package/react-i18next
- https://react.i18next.com/
[Read more about it.](https://www.robinwieruch.de/react-internationalization)
## Installation
- `git clone `
- `cd frontend`
- `npm install`
- `npm start`
## Walkthrough
#### Setup
- see package.json for libraries
- see src/i18n.js for library setup
- see src/index.js for library setup import
- see src/App.js for usage
#### Extracting Translations
Reference: https://react.i18next.com/guides/extracting-translations
- 1. Manual
- 2. Extraction Tool
- https://www.npmjs.com/package/i18next-scanner
- https://www.npmjs.com/package/i18next-parser (used)
- see _frontend/src/i18n.js_ and _package.json_
- https://www.npmjs.com/package/babel-plugin-i18next-extract
- 3. Runtime Extraction with Backend
- custom Express backend (Reference: https://github.com/i18next/i18next-express-middleware)
- see _frontend/src/i18n.js_ and _backend/_
## Alternative Libraries
### react-intl
- https://github.com/formatjs/react-intl
- https://www.npmjs.com/package/react-intl
### js-lingui
- https://github.com/lingui/js-lingui
- https://www.npmjs.com/package/@lingui/react
- https://lingui.js.org/tutorials/setup-cra.html