https://github.com/emanuelefavero/react-i18next
This is a simple example of how to use i18next with React to translate your application
https://github.com/emanuelefavero/react-i18next
i18next locale react react-i18next translation vite
Last synced: 3 months ago
JSON representation
This is a simple example of how to use i18next with React to translate your application
- Host: GitHub
- URL: https://github.com/emanuelefavero/react-i18next
- Owner: emanuelefavero
- License: mit
- Created: 2024-03-05T14:32:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-06T07:29:42.000Z (over 2 years ago)
- Last Synced: 2025-02-04T16:50:27.931Z (over 1 year ago)
- Topics: i18next, locale, react, react-i18next, translation, vite
- Language: TypeScript
- Homepage:
- Size: 56.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React i18next
This is a simple example of how to use i18next with React to translate your application
> Note: `i18next` is a powerful internationalization framework for JavaScript that provides a complete solution to localize and translate your product
>
> Note: We are using `Vite` to build this project, but you can use `Next.js` or any other bundler
### Screenshot
## How to use
1. Clone this repository
2. Install the dependencies with `npm install`
3. Run the project
```bash
npm run dev
```
## How to add a new language
- Create a new file called `translation.json` inside its respective language folder (e.g. `en` for English) and put it inside the `src/locales` folder
```json
{
"welcome": "Hello World"
}
```
- Add the new language to the `i18n.ts` file
```javascript
// Other code here...
// Import the new language
import en from './locales/en/translation.json'
// Add the new language to the resources object
const resources = {
en: {
translation: en,
},
// Other languages here...
}
```
- Add the translation in your React components:
```jsx
import './i18n.ts' // * Import the i18n configuration
import { useTranslation } from 'react-i18next'
export default function App() {
// * Use the t() function to translate text, and the i18n object to change the language
const { t, i18n } = useTranslation()
return (
<>
{t('welcome')}
i18n.changeLanguage('en')}>English
>
)
}
```
## Resources
- [i18next documentation](https://www.i18next.com/)
- [react-i18next documentation](https://react.i18next.com/)
- [Vite documentation](https://vitejs.dev/)
- [Next.js documentation](https://nextjs.org/)
## License
- [MIT](LICENSE.md)