https://github.com/tcdtist/public-react-i18next-boilerplate
💫 A boilerplate for a public React project using i18next for internationalization
https://github.com/tcdtist/public-react-i18next-boilerplate
context-api i18next i18next-react reactjs redux-toolkit tailwindcss zustand
Last synced: 3 months ago
JSON representation
💫 A boilerplate for a public React project using i18next for internationalization
- Host: GitHub
- URL: https://github.com/tcdtist/public-react-i18next-boilerplate
- Owner: tcdtist
- License: mit
- Created: 2024-11-20T10:54:37.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-20T11:25:01.000Z (6 months ago)
- Last Synced: 2025-01-18T03:29:24.173Z (5 months ago)
- Topics: context-api, i18next, i18next-react, reactjs, redux-toolkit, tailwindcss, zustand
- Language: TypeScript
- Homepage: https://tcdtist-react-i18next-boilerplate.vercel.app
- Size: 62.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React i18n Implementation Demo
A comprehensive demonstration of different internationalization (i18n) implementation approaches in React, featuring Context API, Zustand, and react-i18next.
## 🚀 Features
- Three different i18n implementation approaches:
- Context API implementation
- Zustand state management implementation
- Default react-i18next implementation
- TypeScript for type safety
- Modern UI with Tailwind CSS
- Responsive design
- Easy language switching
- Centralized translation management
## 🛠 Tech Stack
- React 18
- TypeScript
- Vite
- TailwindCSS
- i18next
- Zustand
- React Router DOM
- Yarn Package Manager
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/i18n-demo.git
cd i18n-demo
```
2. Install dependencies:
```bash
yarn install
```
3. Start the development server:
```bash
yarn dev
```
## 🏗 Project Structure
```
src/
├── components/ # Shared components
├── config/ # i18n configuration
├── contexts/ # Context API implementation
├── locales/ # Translation files
│ ├── en/ # English translations
│ └── vi/ # Vietnamese translations
├── pages/ # Demo pages
└── stores/ # Zustand store
```
## 💡 Implementation Details
### Context API Implementation
- Uses React's Context API for state management
- Provides a custom hook `useLanguage` for easy access
- Ideal for smaller applications
### Zustand Implementation
- Utilizes Zustand for state management
- Offers a more flexible and scalable solution
- Great for medium to large applications
### React-i18next Implementation
- Uses the standard react-i18next approach
- Provides access to all i18next features
- Recommended for projects requiring advanced i18n features
## 🌐 Available Routes
- `/` - Home page
- `/context` - Context API implementation demo
- `/zustand` - Zustand implementation demo
- `/i18next` - React-i18next implementation demo
## 🔧 Configuration
The i18n configuration can be found in `src/config/i18n.ts`. You can modify:
- Supported languages
- Default language
- Translation namespaces
- Detection options
## 📝 Available Scripts
- `yarn dev` - Start development server
- `yarn build` - Build for production
- `yarn preview` - Preview production build
- `yarn lint` - Run ESLint
- `yarn type-check` - Run TypeScript type checking
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👥 Authors
- Your Name - Initial work - [YourGithub](https://github.com/yourusername)
## 🙏 Acknowledgments
- React Team
- i18next Team
- Zustand Team
- TailwindCSS Team
## 📧 Contact
Your Name - [@yourtwitter](https://twitter.com/yourtwitter) - [email protected]
Project Link: [https://github.com/yourusername/i18n-demo](https://github.com/yourusername/i18n-demo)