https://github.com/othmanekahtal/react-i18n-practical-guide
📚 Complete practical guide for implementing multilingual support in React applications with real-world examples and best practices.
https://github.com/othmanekahtal/react-i18n-practical-guide
i18n-react i18next
Last synced: 8 months ago
JSON representation
📚 Complete practical guide for implementing multilingual support in React applications with real-world examples and best practices.
- Host: GitHub
- URL: https://github.com/othmanekahtal/react-i18n-practical-guide
- Owner: othmanekahtal
- License: mit
- Created: 2024-11-14T11:57:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-12T12:38:07.000Z (over 1 year ago)
- Last Synced: 2025-01-21T17:50:06.173Z (over 1 year ago)
- Topics: i18n-react, i18next
- Language: TypeScript
- Homepage: https://i18n-practical.netlify.app/
- Size: 152 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React i18n Practical Guide
A comprehensive guide and working example for implementing internationalization (i18n) and localization in React applications. Features step-by-step implementations of language switching, number/date formatting, dynamic translations, and RTL support using react-i18next and Tailwind CSS.
## Features
- 🌐 Multiple language support (English, Arabic)
- 🔄 RTL layout support
- 💅 Tailwind CSS integration
- ⚡ Performance optimization techniques
- 🧪 Form validation with Zod
- 📦 Organized translation structure
## Demo Branches
Each feature is implemented in its own branch for easier learning:
- `base`: Basic i18next configuration
- `rtl-support`: RTL layout implementation
- `performance`: Performance optimization
- `persistence-events`: Persisting the preference language
- `formatting`: Formatting dates and numbers
- `namespaces`: Implementing namespaces
## Tech Stack
- React
- TypeScript
- Tailwind CSS
- i18next
- react-i18next
- Zod
- react-hook-form
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/othmanekahtal/react-i18n-practical-guide.git
```
2. Install dependencies:
```bash
pnpm install
```
3. Run the development server:
```bash
pnpm dev
```
## Project Structure
```
src/
├── locales/ # Translation files
│ ├── en/
│ │ ├── common.json
│ │ ├── auth.json
│ │ └── validation.json
│ └── ar/
├── components/ # React components
├── i18n.ts # i18next configuration
└── App.tsx # Main application
```
## VSCode Setup
This project includes configuration for the i18n Ally extension. To use it:
1. Install the "i18n Ally" extension
2. English is configured as the source language
3. Enjoy real-time translation previews and management
## Contributing
Feel free to contribute to this project. Any contributions you make are greatly appreciated.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
x - [@othmane_kahtal](https://x.com/othmane_kahtal)
Linkedin - [@othmane kahtal](https://www.linkedin.com/in/othmanekahtal/)
hashnode - [@othmane kahtal](https://hashnode.com/@othmanekahtal)
Blog Link: [https://blog.othmane.me/building-multilingual-react-apps-practical-guide-to-i18next-and-rtl-support](https://blog.othmane.me/building-multilingual-react-apps-practical-guide-to-i18next-and-rtl-support)