Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/garronej/i18nifty
🌎 Type safe React i18n library
https://github.com/garronej/i18nifty
Last synced: 5 days ago
JSON representation
🌎 Type safe React i18n library
- Host: GitHub
- URL: https://github.com/garronej/i18nifty
- Owner: garronej
- License: mit
- Created: 2022-04-21T16:21:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T20:31:49.000Z (25 days ago)
- Last Synced: 2024-11-18T21:40:34.455Z (25 days ago)
- Language: TypeScript
- Homepage: https://i18nifty.dev
- Size: 12.7 MB
- Stars: 149
- Watchers: 4
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Type-safe internationalization and translation React library fro SPAs
Home
-
Documentation
-
Sandbox
An internationalization and translation (i18n) library for React that focuses on the developer experience.
With ChatGPT capable of producing high-quality translations, there's no longer a need to rely on third-party translation services.
This allows us to shift our attention from making resource files editable in spreadsheet software to enhancing the developer experience.
In i18nifty, everything is TypeScript and type-safe. You can define your translations as functions and return them as React nodes, making the process more expressive, easier to write, and simpler to maintain.
> `i18nifty` is intended for use in Single Page Application (SPA) projects, such as Vite or Create React App.
> It is not designed for use with Next.js or other SSR/SSG-enabled meta-frameworks.
## What do I expect from my i18n library
- [x] I want **true type safety**, If I forgot something I want to be warned about it at **compile time**. I want to be guided by intelisence
through and through so I can focus on my content.
- [x] I want to be able to [use React components](https://github.com/garronej/i18nifty/blob/216d90bfa80741c2dc39b79ff7965d18af0bc258/src/test/apps/spa/src/i18n.tsx#L35-L40) and [involve JS logic](https://github.com/garronej/i18nifty/blob/216d90bfa80741c2dc39b79ff7965d18af0bc258/src/test/apps/spa/src/i18n.tsx#L45-L53) in my translations (even if it means giving up support for third part translations services like https://locize.com/).
- [x] I want the language to **default to the browser preference**.
- [x] I want the language preferences to be **persistent across reloads**.
- [x] I want asynchronous loading of locales
- [x] **SEO**: I want to let Google know that my website is available in multiple languages.
- [x] I want to be able to change the language of my app by adding `?lang=xx` to the URL without involving my routing library.
- [x] I want to be able to **explicitly fallback to English** (or another language) when the translation for a given language is incomplete.
- [x] a11y: When internationalized text received from the backend aren't in the language of the app [I want a label to be added](https://docs.i18nifty.dev/api-reference/localizedstring)
- [x] Bundle size: I want only one translation to be downloaded. If the user select another language the required resources must be downloaded dynamically.
`i18nifty` is the only library i18n library (at the time of writing theses lines) that checks all the boxes. [Discover](https://www.i18nifty.dev).
## Showcases
This library has been used to build the following projects:
## Contributing
```bash
git clone https://github.com/garronej/i18nifty
cd i18nifty
yarn
# Start the test app in watch mode
yarn start-test-app
# Start the alternative test app where resources are split into multiples files to enable lazy loading.
yarn start-test-app-lazy
# Link in an external app.
yarn link-in-app YOUR-APP # ../YOUR-APP is supposed to exist
npx tsc -w
```