https://github.com/ger86/react-tutorial-i18next

Learn how to integrate the i18next library into an application made with React to add translations
https://github.com/ger86/react-tutorial-i18next

i18next i18next-backend i18next-browser-languagedetector react-i18next reactjs

Last synced: 3 months ago
JSON representation

Learn how to integrate the i18next library into an application made with React to add translations

• Host: GitHub
• URL: https://github.com/ger86/react-tutorial-i18next
• Owner: ger86
• License: gpl-3.0
• Created: 2020-07-20T11:02:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T11:57:20.000Z (over 3 years ago)
• Last Synced: 2025-04-26T08:38:20.958Z (about 1 year ago)
• Topics: i18next, i18next-backend, i18next-browser-languagedetector, react-i18next, reactjs
• Language: JavaScript
• Homepage: https://youtu.be/Nc2xWHONPjQ
• Size: 3.81 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🔁 React & i18next

## Description

In this project I want to show you how we can integrate the **i18next** library with React thanks to **react-i18next** to add translations to our application.

The library `react-i18next` also has its own hooks (`useTranslation`), something that comes as an addition now that functional components are the trend in development with React.

## You will learn

Integrating **i18next** in a project developed with React thanks to **react-i18next** library.

Using the hook `useTranslation` to translate texts.

Implementing a language switcher thanks to `i18next` object. 

Asynchronously loading the translation files, separating them in different files.

## Run the project

Use `yarn start` to run the app in the development mode and open http://localhost:3000 to view it in the browser.

## Video Tutorial

[![ReactJS. Añadiendo traducciones con i18next](https://i9.ytimg.com/vi/Nc2xWHONPjQ/mqdefault.jpg?time=1596012300000&sqp=CIzuhPkF&rs=AOn4CLDmN8gg4U8ZfkNWvClXSIQq9Yl2Pg)](http://www.youtube.com/watch?v=Nc2xWHONPjQ "ReactJS. Añadiendo traducciones con i18next")

## To read more

- [i18next documentation](https://www.i18next.com/)

- [react-i18next documentation](https://react.i18next.com/)

- [React. Adding translations with i18next](https://medium.com/@ger86/react-adding-translations-with-i18next-b6bf52cd621e)