![\"i18nifty](\"https://user-images.githubusercontent.com/6702424/172086583-2014cf56-6deb-466d-b4d4-df80b6e85a1e.png\")
\n \n \n Type-safe internationalization and translation React library fro SPAs\n
\n
\n \n ![](\"https://github.com/garronej/i18nifty/actions/workflows/ci.yaml/badge.svg\"){kind=icon}
\n \n \n ![](\"https://img.shields.io/bundlephobia/minzip/i18nifty\")
![](\"https://img.shields.io/npm/dm/i18nifty\")
![](\"https://img.shields.io/npm/v/i18nifty?logo=npm\")
![](\"https://img.shields.io/npm/l/i18nifty\")
\n Home\n -\n Documentation\n -\n Sandbox\n
\n\nAn internationalization and translation (i18n) library for React that focuses on the developer experience. \nWith ChatGPT capable of producing high-quality translations, there's no longer a need to rely on third-party translation services. \nThis allows us to shift our attention from making resource files editable in spreadsheet software to enhancing the developer experience. \nIn 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.\n\n> `i18nifty` is intended for use in Single Page Application (SPA) projects, such as Vite or Create React App.\n> It is not designed for use with Next.js or other SSR/SSG-enabled meta-frameworks.\n\n## What do I expect from my i18n library\n\n- [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\n through and through so I can focus on my content.\n- [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/).\n- [x] I want the language to **default to the browser preference**.\n- [x] I want the language preferences to be **persistent across reloads**.\n- [x] I want asynchronous loading of locales\n- [x] **SEO**: I want to let Google know that my website is available in multiple languages.\n- [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.\n- [x] I want to be able to **explicitly fallback to English** (or another language) when the translation for a given language is incomplete.\n- [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)\n- [x] Bundle size: I want only one translation to be downloaded. If the user select another language the required resources must be downloaded dynamically.\n\n`i18nifty` is the only library i18n library (at the time of writing theses lines) that checks all the boxes. [Discover](https://www.i18nifty.dev).\n\n![\"image\"](\"https://user-images.githubusercontent.com/6702424/231314534-2eeb1ab5-5460-4caa-b78d-55afd400c9fc.png\")
\n\n\n\n