├── .all-contributorsrc ├── .babelrc ├── .codeclimate.yml ├── .coveralls.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github ├── stale.yml └── workflows │ └── CI.yml ├── .gitignore ├── .husky └── pre-commit ├── .npmignore ├── .prettierignore ├── .prettierrc.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── TransWithoutContext.d.mts ├── TransWithoutContext.d.ts ├── example ├── ReactNativeLocizeProject │ ├── .bundle │ │ └── config │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── App.tsx │ ├── Gemfile │ ├── Gemfile.lock │ ├── README.md │ ├── __tests__ │ │ └── App.test.tsx │ ├── android │ │ ├── app │ │ │ ├── build.gradle │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── reactnativelocizeproject │ │ │ │ │ ├── MainActivity.kt │ │ │ │ │ └── MainApplication.kt │ │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── i18n.js │ ├── index.js │ ├── ios │ │ ├── .xcode.env │ │ ├── Podfile │ │ ├── Podfile.lock │ │ ├── ReactNativeLocizeProject.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── ReactNativeLocizeProject.xcscheme │ │ ├── ReactNativeLocizeProject.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── ReactNativeLocizeProject │ │ │ ├── AppDelegate.swift │ │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── PrivacyInfo.xcprivacy │ ├── jest.config.js │ ├── metro.config.js │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── ReactNativeProject │ ├── .bundle │ │ └── config │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── App.tsx │ ├── Gemfile │ ├── Gemfile.lock │ ├── README.md │ ├── __tests__ │ │ └── App.test.tsx │ ├── android │ │ ├── app │ │ │ ├── build.gradle │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── reactnativeproject │ │ │ │ │ ├── MainActivity.kt │ │ │ │ │ └── MainApplication.kt │ │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── i18n.js │ ├── index.js │ ├── ios │ │ ├── .xcode.env │ │ ├── Podfile │ │ ├── Podfile.lock │ │ ├── ReactNativeProject.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── ReactNativeProject.xcscheme │ │ ├── ReactNativeProject.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── ReactNativeProject │ │ │ ├── AppDelegate.swift │ │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── PrivacyInfo.xcprivacy │ ├── jest.config.js │ ├── locales │ │ ├── de │ │ │ └── translation.json │ │ └── en │ │ │ └── translation.json │ ├── metro.config.js │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── devserver-save-missing │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── config-overrides.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translation.json │ │ │ └── en │ │ │ │ └── translation.json │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ └── webpack.config.js ├── locize │ ├── .env │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ ├── video_sample.png │ └── video_sample_old.png ├── razzle-ssr │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Home.css │ │ ├── Home.js │ │ ├── client.js │ │ ├── i18n.js │ │ ├── index.js │ │ ├── locales │ │ ├── de │ │ │ └── translations.json │ │ └── en │ │ │ └── translations.json │ │ ├── react.svg │ │ └── server.js ├── react-component-lib │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translation.json │ │ │ └── en │ │ │ │ └── translation.json │ │ ├── logo.svg │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── other-lib │ │ ├── component.js │ │ └── i18n.js ├── react-fluent │ ├── .env │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translations.ftl │ │ │ └── en │ │ │ │ └── translations.ftl │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── react-icu │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translations.json │ │ │ ├── en │ │ │ │ └── translations.json │ │ │ └── ru │ │ │ │ └── translations.json │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── ComponentUsingMacro.js │ │ ├── ComponentUsingMacroInterpolated.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── serviceWorker.js │ │ └── setupTests.js ├── react-localstorage │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translation.json │ │ │ └── en │ │ │ │ └── translation.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── react-typescript │ ├── simple-multi-namespaces │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── @types │ │ │ │ ├── i18next.d.ts │ │ │ │ ├── react-app-env.d.ts │ │ │ │ └── resources.ts │ │ │ ├── App.tsx │ │ │ ├── components │ │ │ │ ├── Comp1.tsx │ │ │ │ ├── Comp2.tsx │ │ │ │ └── Comp3.tsx │ │ │ ├── i18n │ │ │ │ ├── config.ts │ │ │ │ └── en │ │ │ │ │ ├── ns1.json │ │ │ │ │ └── ns2.json │ │ │ ├── index.css │ │ │ └── index.tsx │ │ └── tsconfig.json │ └── simple │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── @types │ │ │ ├── i18next.d.ts │ │ │ ├── react-app-env.d.ts │ │ │ └── resources.ts │ │ ├── App.tsx │ │ ├── i18n │ │ │ ├── config.ts │ │ │ └── en │ │ │ │ └── translation.json │ │ ├── index.css │ │ └── index.tsx │ │ └── tsconfig.json ├── react │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── de │ │ │ │ └── translation.json │ │ │ └── en │ │ │ │ └── translation.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── react_native_windows │ ├── .buckconfig │ ├── .eslintrc.js │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .prettierrc.json │ ├── .watchmanconfig │ ├── App.js │ ├── __tests__ │ │ └── App-test.js │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── build_defs.bzl │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── react_native_windows │ │ │ │ │ └── ReactNativeFlipper.java │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── react_native_windows │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── index.js │ ├── ios │ │ ├── Podfile │ │ ├── react_native_windows-tvOS │ │ │ └── Info.plist │ │ ├── react_native_windows-tvOSTests │ │ │ └── Info.plist │ │ ├── react_native_windows.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ ├── react_native_windows-tvOS.xcscheme │ │ │ │ └── react_native_windows.xcscheme │ │ ├── react_native_windows │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── main.m │ │ └── react_native_windowsTests │ │ │ ├── Info.plist │ │ │ └── react_native_windowsTests.m │ ├── macos │ │ ├── .gitignore │ │ ├── Podfile │ │ ├── Podfile.lock │ │ ├── react_native_windows-iOS │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ ├── react_native_windows-macOS │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Assets.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Base.lproj │ │ │ │ └── Main.storyboard │ │ │ ├── Info.plist │ │ │ ├── ViewController.h │ │ │ ├── ViewController.m │ │ │ ├── main.m │ │ │ └── react_native_windows.entitlements │ │ ├── react_native_windows.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ ├── react_native_windows-iOS.xcscheme │ │ │ │ └── react_native_windows-macOS.xcscheme │ │ └── react_native_windows.xcworkspace │ │ │ └── contents.xcworkspacedata │ ├── metro.config.js │ ├── metro.config.macos.js │ ├── package.json │ ├── react-native.config.js │ ├── windows │ │ ├── .gitignore │ │ ├── react_native_windows.sln │ │ └── react_native_windows │ │ │ ├── .gitignore │ │ │ ├── App.cpp │ │ │ ├── App.h │ │ │ ├── App.idl │ │ │ ├── App.xaml │ │ │ ├── Assets │ │ │ ├── LockScreenLogo.scale-200.png │ │ │ ├── SplashScreen.scale-200.png │ │ │ ├── Square150x150Logo.scale-200.png │ │ │ ├── Square44x44Logo.scale-200.png │ │ │ ├── Square44x44Logo.targetsize-24_altform-unplated.png │ │ │ ├── StoreLogo.png │ │ │ └── Wide310x150Logo.scale-200.png │ │ │ ├── AutolinkedNativeModules.g.cpp │ │ │ ├── AutolinkedNativeModules.g.h │ │ │ ├── AutolinkedNativeModules.g.targets │ │ │ ├── MainPage.cpp │ │ │ ├── MainPage.h │ │ │ ├── MainPage.idl │ │ │ ├── MainPage.xaml │ │ │ ├── Package.appxmanifest │ │ │ ├── PropertySheet.props │ │ │ ├── ReactPackageProvider.cpp │ │ │ ├── ReactPackageProvider.h │ │ │ ├── packages.config │ │ │ ├── pch.cpp │ │ │ ├── pch.h │ │ │ ├── react_native_windows.vcxproj │ │ │ ├── react_native_windows.vcxproj.filters │ │ │ └── react_native_windows_TemporaryKey.pfx │ └── yarn.lock ├── storybook │ ├── .gitignore │ ├── .storybook │ │ ├── main.js │ │ └── preview.js │ ├── README.md │ ├── docs │ │ └── storybook-example.gif │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── locales │ │ │ ├── ar │ │ │ │ └── translation.json │ │ │ ├── de │ │ │ │ └── translation.json │ │ │ └── en │ │ │ │ └── translation.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── i18n.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── stories │ │ ├── app.stories.js │ │ └── components.stories.js └── test-jest │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── locales │ │ ├── de │ │ │ └── translations.json │ │ └── en │ │ │ └── translations.json │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Trans.js │ ├── Trans.test.js │ ├── Translation.js │ ├── Translation.test.js │ ├── UseTranslation.js │ ├── UseTranslation.test.js │ ├── UseTranslationWithInterpolation.js │ ├── UseTranslationWithInterpolation.test.js │ ├── WithTranslation.js │ ├── WithTranslation.test.js │ ├── __mocks__ │ └── react-i18next.js │ ├── i18n.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── setupTests.js ├── helpers.d.ts ├── icu.macro.d.mts ├── icu.macro.d.ts ├── icu.macro.js ├── index.d.mts ├── index.d.ts ├── initReactI18next.d.mts ├── initReactI18next.d.ts ├── lint-staged.config.mjs ├── package-lock.json ├── package.json ├── react-i18next.js ├── react-i18next.min.js ├── rollup.config.mjs ├── src ├── I18nextProvider.js ├── Trans.js ├── TransWithoutContext.js ├── Translation.js ├── context.js ├── defaults.js ├── i18nInstance.js ├── index.js ├── initReactI18next.js ├── unescape.js ├── useSSR.js ├── useTranslation.js ├── utils.js ├── withSSR.js └── withTranslation.js ├── test ├── I18nextProvider.spec.jsx ├── Translation.spec.jsx ├── __snapshots__ │ └── icu.macro.spec.js.snap ├── backendLngAwareMock.js ├── backendMock.js ├── hasLoadedNamespaceMock.js ├── i18n.js ├── icu.macro.spec.js ├── setup.js ├── trans.nodeToString.spec.jsx ├── trans.render.dynamic.spec.jsx ├── trans.render.icu.spec.jsx ├── trans.render.object.spec.jsx ├── trans.render.spec.jsx ├── typescript │ ├── custom-types │ │ ├── Trans.test.tsx │ │ ├── TransWithoutContext.test.tsx │ │ ├── Translation.test.ts │ │ ├── i18next.d.ts │ │ ├── tsconfig.json │ │ └── useTranslation.test.ts │ └── misc │ │ ├── I18nextProvider.test.tsx │ │ ├── Trans.test.tsx │ │ ├── TransWithoutContext.test.tsx │ │ ├── Translation.test.tsx │ │ ├── context.test.tsx │ │ ├── tsconfig.json │ │ ├── tsconfig.nonEsModuleInterop.json │ │ ├── useSSR.test.tsx │ │ ├── useTranslation.test.ts │ │ ├── withSSR.test.tsx │ │ └── withTranslation.test.tsx ├── unescape.spec.js ├── useSSR.spec.js ├── useTranslation.loading.spec.js ├── useTranslation.loadingLng.spec.js ├── useTranslation.ready.spec.jsx ├── useTranslation.spec.jsx ├── useTranslation.usedNamespaces.spec.js ├── utils.spec.js ├── withSSR.spec.jsx ├── withTranslation.keyPrefix.spec.jsx └── withTranslation.spec.jsx ├── tsconfig.json ├── vitest.config.mts └── vitest.workspace.typescript.mts /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "react-i18next", 3 | "projectOwner": "i18next", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": ["README.md"], 7 | "imageSize": 100, 8 | "commit": false, 9 | "contributors": [ 10 | { 11 | "login": "jamuhl", 12 | "name": "Jan Mühlemann", 13 | "avatar_url": "https://avatars3.githubusercontent.com/u/977772?v=4", 14 | "profile": "http://twitter.com/jamuhl", 15 | "contributions": ["code", "example", "doc", "question"] 16 | }, 17 | { 18 | "login": "adrai", 19 | "name": "Adriano Raiano", 20 | "avatar_url": "https://avatars0.githubusercontent.com/u/1086194?v=4", 21 | "profile": "http://twitter.com/#!/adrirai", 22 | "contributions": ["code", "example", "doc", "question"] 23 | }, 24 | { 25 | "login": "tigerabrodi", 26 | "name": "Tiger Abrodi", 27 | "avatar_url": "https://avatars1.githubusercontent.com/u/49603590?v=4", 28 | "profile": "https://tigerabrodi.dev/", 29 | "contributions": ["question", "code", "review"] 30 | }, 31 | { 32 | "login": "pedrodurek", 33 | "name": "Pedro Durek", 34 | "avatar_url": "https://avatars1.githubusercontent.com/u/12190482?v=4", 35 | "profile": "https://github.com/pedrodurek", 36 | "contributions": ["code", "example"] 37 | } 38 | ], 39 | "commitConvention": "none" 40 | } 41 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "development": { 4 | "presets": [ 5 | [ 6 | "@babel/env", 7 | { 8 | "targets": { "browsers": ["defaults"] } 9 | } 10 | ], 11 | "@babel/react" 12 | ], 13 | "plugins": ["@babel/plugin-transform-runtime"] 14 | }, 15 | "jsnext": { 16 | "presets": [ 17 | [ 18 | "@babel/env", 19 | { 20 | "targets": { "browsers": ["defaults"] }, 21 | "modules": false, 22 | "useBuiltIns": false 23 | } 24 | ], 25 | "@babel/react" 26 | ], 27 | "plugins": ["@babel/plugin-transform-runtime"] 28 | } 29 | }, 30 | "comments": false 31 | } 32 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | engines: 2 | duplication: 3 | enabled: true 4 | config: 5 | languages: 6 | - ruby 7 | - javascript: 8 | mass_threshold: 58 9 | - python 10 | - php 11 | eslint: 12 | # Disabled since this engine used a different set of version of 13 | # `@typescript/eslint` and `typescript` 14 | # 15 | # @see https://github.com/i18next/i18next/pull/2098 16 | enabled: false 17 | channel: 'eslint-8' 18 | fixme: 19 | enabled: true 20 | ratings: 21 | paths: 22 | - 'src/**/*' 23 | exclude_paths: 24 | - test/ 25 | - coverage/ 26 | - dist/ 27 | - example/ 28 | - 'react-i18next.js' 29 | - 'react-i18next.min.js' 30 | - 'rollup.config.js' 31 | - 'src/shallowEqual.js' 32 | -------------------------------------------------------------------------------- /.coveralls.yml: -------------------------------------------------------------------------------- 1 | repo_token: a7NPPsDW6jNJ3x23jBgWuO6KxV3Eq0mF2 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/dist/ 2 | **/node_modules/ 3 | example/**/* 4 | **/react-i18next.js 5 | **/react-i18next.min.js 6 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 7 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - 'discussion' 8 | - 'feature request' 9 | - 'bug' 10 | - 'breaking change' 11 | - 'doc' 12 | - 'issue' 13 | - 'help wanted' 14 | - 'good first issue' 15 | - 'pr hold' 16 | # Label to use when marking an issue as stale 17 | staleLabel: stale 18 | # Comment to post when marking an issue as stale. Set to `false` to disable 19 | markComment: > 20 | This issue has been automatically marked as stale because it has not had 21 | recent activity. It will be closed if no further activity occurs. Thank you 22 | for your contributions. 23 | # Comment to post when closing a stale issue. Set to `false` to disable 24 | closeComment: false 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore specific files 2 | .settings.xml 3 | .monitor 4 | .DS_Store 5 | *.orig 6 | npm-debug.log 7 | npm-debug.log.* 8 | *.dat 9 | .idea 10 | .vscode 11 | .eslintcache 12 | 13 | # Ignore various temporary files 14 | *~ 15 | *.swp 16 | 17 | 18 | # Ignore various Node.js related directories and files 19 | node_modules 20 | node_modules/**/* 21 | coverage/**/* 22 | example/build/**/* 23 | dist/**/* 24 | .next 25 | yarn.lock 26 | out 27 | 28 | # ignore packaged releases 29 | *.tgz 30 | 31 | # vitest temp / cache files 32 | tsconfig.vitest-temp.json 33 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm exec lint-staged 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test/ 2 | coverage/ 3 | example/ 4 | bin/ 5 | .babelrc 6 | .editorconfig 7 | .eslintignore 8 | .eslintrc 9 | .gitignore 10 | bower.json 11 | .github 12 | .circleci 13 | .vscode 14 | rollup.config.js 15 | rollup.config.mjs 16 | .all-contributorsrc 17 | .codeclimate.yml 18 | .coveralls.yml 19 | tsconfig*.json 20 | .prettierrc.json 21 | vitest.config.mts 22 | vitest.workspace.mts -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/dist/ 2 | **/react-i18next.js 3 | **/react-i18next.min.js 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc.json", 3 | "bracketSpacing": true, 4 | "bracketSameLine": false, 5 | "printWidth": 100, 6 | "semi": true, 7 | "singleQuote": true, 8 | "trailingComma": "all" 9 | } 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2025 i18next 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /TransWithoutContext.d.mts: -------------------------------------------------------------------------------- 1 | export * from './TransWithoutContext.js'; 2 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | 12 | # Ruby 3.4.0 has removed some libraries from the standard library. 13 | gem 'bigdecimal' 14 | gem 'logger' 15 | gem 'benchmark' 16 | gem 'mutex_m' 17 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import React from 'react'; 6 | import ReactTestRenderer from 'react-test-renderer'; 7 | import App from '../App'; 8 | 9 | test('renders correctly', async () => { 10 | await ReactTestRenderer.act(() => { 11 | ReactTestRenderer.create(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/debug.keystore -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/java/com/reactnativelocizeproject/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.reactnativelocizeproject 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "ReactNativeLocizeProject" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactNativeLocizeProject 3 | 4 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "35.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 35 6 | targetSdkVersion = 35 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.0.21" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeLocizeProject/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'ReactNativeLocizeProject' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeLocizeProject", 3 | "displayName": "ReactNativeLocizeProject" 4 | } 5 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/i18n.js: -------------------------------------------------------------------------------- 1 | import 'intl-pluralrules'; 2 | import i18n from 'i18next'; 3 | import {initReactI18next} from 'react-i18next'; 4 | import RNLanguageDetector from '@os-team/i18next-react-native-language-detector'; 5 | import ChainedBackend from 'i18next-chained-backend'; 6 | import LocizeBackend from 'i18next-locize-backend'; 7 | import LocalStorageBackend from 'i18next-localstorage-backend'; 8 | 9 | i18n 10 | .use(ChainedBackend) 11 | .use(RNLanguageDetector) 12 | .use(initReactI18next) 13 | .init({ 14 | debug: true, 15 | fallbackLng: 'en', 16 | supportedLngs: ['en', 'de'], 17 | backend: { 18 | backends: [LocalStorageBackend, LocizeBackend], 19 | backendOptions: [ 20 | { 21 | expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days 22 | }, 23 | { 24 | projectId: 'ce0cf818-32e5-44a5-b7f0-4ea9e840d962', 25 | }, 26 | ], 27 | }, 28 | }); 29 | 30 | export default i18n; 31 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | // import i18n (needs to be bundled ;)) 10 | import './i18n'; 11 | 12 | AppRegistry.registerComponent(appName, () => App); 13 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'ReactNativeLocizeProject' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | post_install do |installer| 27 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 28 | react_native_post_install( 29 | installer, 30 | config[:reactNativePath], 31 | :mac_catalyst_enabled => false, 32 | # :ccache_enabled => true 33 | ) 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "iphone", 5 | "scale": "2x", 6 | "size": "20x20" 7 | }, 8 | { 9 | "idiom": "iphone", 10 | "scale": "3x", 11 | "size": "20x20" 12 | }, 13 | { 14 | "idiom": "iphone", 15 | "scale": "2x", 16 | "size": "29x29" 17 | }, 18 | { 19 | "idiom": "iphone", 20 | "scale": "3x", 21 | "size": "29x29" 22 | }, 23 | { 24 | "idiom": "iphone", 25 | "scale": "2x", 26 | "size": "40x40" 27 | }, 28 | { 29 | "idiom": "iphone", 30 | "scale": "3x", 31 | "size": "40x40" 32 | }, 33 | { 34 | "idiom": "iphone", 35 | "scale": "2x", 36 | "size": "60x60" 37 | }, 38 | { 39 | "idiom": "iphone", 40 | "scale": "3x", 41 | "size": "60x60" 42 | }, 43 | { 44 | "idiom": "ios-marketing", 45 | "scale": "1x", 46 | "size": "1024x1024" 47 | } 48 | ], 49 | "info": { 50 | "author": "xcode", 51 | "version": 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "version": 1, 4 | "author": "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/ios/ReactNativeLocizeProject/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://reactnative.dev/docs/metro 6 | * 7 | * @type {import('@react-native/metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /example/ReactNativeLocizeProject/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /example/ReactNativeProject/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/ReactNativeProject/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /example/ReactNativeProject/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /example/ReactNativeProject/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/ReactNativeProject/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | 12 | # Ruby 3.4.0 has removed some libraries from the standard library. 13 | gem 'bigdecimal' 14 | gem 'logger' 15 | gem 'benchmark' 16 | gem 'mutex_m' 17 | -------------------------------------------------------------------------------- /example/ReactNativeProject/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import React from 'react'; 6 | import ReactTestRenderer from 'react-test-renderer'; 7 | import App from '../App'; 8 | 9 | test('renders correctly', async () => { 10 | await ReactTestRenderer.act(() => { 11 | ReactTestRenderer.create(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/debug.keystore -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/java/com/reactnativeproject/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.reactnativeproject 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "ReactNativeProject" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactNativeProject 3 | 4 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "35.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 35 6 | targetSdkVersion = 35 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.0.21" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/ReactNativeProject/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/ReactNativeProject/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /example/ReactNativeProject/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'ReactNativeProject' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /example/ReactNativeProject/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeProject", 3 | "displayName": "ReactNativeProject" 4 | } 5 | -------------------------------------------------------------------------------- /example/ReactNativeProject/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/ReactNativeProject/i18n.js: -------------------------------------------------------------------------------- 1 | import 'intl-pluralrules'; 2 | import i18n from 'i18next'; 3 | import {initReactI18next} from 'react-i18next'; 4 | import RNLanguageDetector from '@os-team/i18next-react-native-language-detector'; 5 | 6 | import enTranslation from './locales/en/translation.json'; 7 | import deTranslation from './locales/de/translation.json'; 8 | 9 | i18n 10 | .use(RNLanguageDetector) 11 | .use(initReactI18next) 12 | .init({ 13 | debug: true, 14 | fallbackLng: 'en', 15 | supportedLngs: ['en', 'de'], 16 | resources: { 17 | en: { 18 | translation: enTranslation, 19 | }, 20 | de: { 21 | translation: deTranslation, 22 | }, 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /example/ReactNativeProject/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | // import i18n (needs to be bundled ;)) 10 | import './i18n'; 11 | 12 | AppRegistry.registerComponent(appName, () => App); 13 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'ReactNativeProject' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | post_install do |installer| 27 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 28 | react_native_post_install( 29 | installer, 30 | config[:reactNativePath], 31 | :mac_catalyst_enabled => false, 32 | # :ccache_enabled => true 33 | ) 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/ReactNativeProject.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/ReactNativeProject/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "iphone", 5 | "scale": "2x", 6 | "size": "20x20" 7 | }, 8 | { 9 | "idiom": "iphone", 10 | "scale": "3x", 11 | "size": "20x20" 12 | }, 13 | { 14 | "idiom": "iphone", 15 | "scale": "2x", 16 | "size": "29x29" 17 | }, 18 | { 19 | "idiom": "iphone", 20 | "scale": "3x", 21 | "size": "29x29" 22 | }, 23 | { 24 | "idiom": "iphone", 25 | "scale": "2x", 26 | "size": "40x40" 27 | }, 28 | { 29 | "idiom": "iphone", 30 | "scale": "3x", 31 | "size": "40x40" 32 | }, 33 | { 34 | "idiom": "iphone", 35 | "scale": "2x", 36 | "size": "60x60" 37 | }, 38 | { 39 | "idiom": "iphone", 40 | "scale": "3x", 41 | "size": "60x60" 42 | }, 43 | { 44 | "idiom": "ios-marketing", 45 | "scale": "1x", 46 | "size": "1024x1024" 47 | } 48 | ], 49 | "info": { 50 | "author": "xcode", 51 | "version": 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/ReactNativeProject/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "version": 1, 4 | "author": "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ReactNativeProject/ios/ReactNativeProject/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example/ReactNativeProject/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/ReactNativeProject/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "part1": "Um loszulegen, ändere <1>src/App(DE).js speichern und neu laden.", 4 | "part2": "Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Buttons." 5 | }, 6 | "new": { 7 | "key": "Dies wird automatisch hinzugefügt" 8 | }, 9 | "title": "Willkommen zu React" 10 | } 11 | -------------------------------------------------------------------------------- /example/ReactNativeProject/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "part1": "To get started, edit <1>src/App.js and save to reload.", 4 | "part2": "Switch language between english and german using buttons above." 5 | }, 6 | "new": { 7 | "key": "This will be added automatically!!!" 8 | }, 9 | "title": "Welcome to React" 10 | } 11 | -------------------------------------------------------------------------------- /example/ReactNativeProject/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://reactnative.dev/docs/metro 6 | * 7 | * @type {import('@react-native/metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /example/ReactNativeProject/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /example/devserver-save-missing/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/devserver-save-missing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/devserver-save-missing/README.md: -------------------------------------------------------------------------------- 1 | example using web-dev-server to save missing translations 2 | -------------------------------------------------------------------------------- /example/devserver-save-missing/config-overrides.js: -------------------------------------------------------------------------------- 1 | const i18next = require('i18next'); 2 | const Backend = require('i18next-fs-backend'); 3 | const i18nextMiddleware = require('i18next-http-middleware'); 4 | const bodyParser = require('body-parser'); 5 | 6 | i18next 7 | .use(Backend) 8 | .use(i18nextMiddleware.LanguageDetector) 9 | .init({ 10 | backend: { 11 | loadPath: __dirname + '/public/locales/{{lng}}/{{ns}}.json', 12 | addPath: __dirname + '/public/locales/{{lng}}/{{ns}}.missing.json', 13 | }, 14 | fallbackLng: 'en', 15 | // debug: true, 16 | saveMissing: true, 17 | }); 18 | 19 | module.exports = { 20 | devServer: (configFunction) => (proxy, allowedHost) => { 21 | const config = configFunction(proxy, allowedHost); 22 | config.setupMiddlewares = (middlewares, devServer) => { 23 | if (!devServer) throw new Error('webpack-dev-server is not defined'); 24 | 25 | devServer.app.post( 26 | '/locales/:lng/:ns', 27 | bodyParser.json(), 28 | i18nextMiddleware.missingKeyHandler(i18next), 29 | ); 30 | // addPath for client: http://localhost:3000/locales/{{lng}}/{{ns}} 31 | 32 | return middlewares; 33 | }; 34 | return config; 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /example/devserver-save-missing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_usinghooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "body-parser": "^1.20.2", 7 | "i18next": "^23.12.3", 8 | "i18next-browser-languagedetector": "^8.0.0", 9 | "i18next-fs-backend": "^2.3.2", 10 | "i18next-http-backend": "^2.5.2", 11 | "i18next-http-middleware": "^3.6.0", 12 | "react": "^18.3.1", 13 | "react-app-rewired": "^2.2.1", 14 | "react-dom": "^18.3.1", 15 | "react-i18next": "^15.0.1", 16 | "react-scripts": "^5.0.1" 17 | }, 18 | "scripts": { 19 | "start": "react-app-rewired start", 20 | "build": "react-app-rewired build", 21 | "test": "react-app-rewired test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "development": [ 32 | "last 2 chrome versions", 33 | "last 2 firefox versions", 34 | "last 2 edge versions" 35 | ], 36 | "production": [ 37 | ">1%", 38 | "last 4 versions", 39 | "Firefox ESR", 40 | "not ie < 11" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/devserver-save-missing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/devserver-save-missing/public/favicon.ico -------------------------------------------------------------------------------- /example/devserver-save-missing/public/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js und speichere um neuzuladen.", 5 | "part2": "Wechsle die Sprache zwischen deutsch und englisch mit Hilfe der beiden Schalter." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/devserver-save-missing/public/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between english and german using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/devserver-save-missing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/devserver-save-missing/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/devserver-save-missing/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | 6 | i18n 7 | // load translation using http -> see /public/locales 8 | // learn more: https://github.com/i18next/i18next-http-backend 9 | .use(Backend) 10 | // detect user language 11 | // learn more: https://github.com/i18next/i18next-browser-languageDetector 12 | .use(LanguageDetector) 13 | // pass the i18n instance to react-i18next. 14 | .use(initReactI18next) 15 | // init i18next 16 | // for all options read: https://www.i18next.com/overview/configuration-options 17 | .init({ 18 | fallbackLng: 'en', 19 | debug: true, 20 | 21 | interpolation: { 22 | escapeValue: false, // not needed for react as it escapes by default 23 | }, 24 | saveMissing: true, 25 | backend: { 26 | addPath: 'http://localhost:3000/locales/{{lng}}/{{ns}}', 27 | }, 28 | }); 29 | 30 | export default i18n; 31 | -------------------------------------------------------------------------------- /example/devserver-save-missing/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/devserver-save-missing/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/devserver-save-missing/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // ... 3 | devServer: { 4 | setupMiddlewares: (middlewares, devServer) => { 5 | if (!devServer) { 6 | throw new Error('webpack-dev-server is not defined'); 7 | } 8 | 9 | devServer.app.get('/setup-middleware/some/path', (_, response) => { 10 | response.send('setup-middlewares option GET'); 11 | }); 12 | 13 | // Use the `unshift` method if you want to run a middleware before all other middlewares 14 | // or when you are migrating from the `onBeforeSetupMiddleware` option 15 | middlewares.unshift({ 16 | name: 'first-in-array', 17 | // `path` is optional 18 | path: '/foo/path', 19 | middleware: (req, res) => { 20 | res.send('Foo!'); 21 | }, 22 | }); 23 | 24 | // Use the `push` method if you want to run a middleware after all other middlewares 25 | // or when you are migrating from the `onAfterSetupMiddleware` option 26 | middlewares.push({ 27 | name: 'hello-world-test-one', 28 | // `path` is optional 29 | path: '/foo/bar', 30 | middleware: (req, res) => { 31 | res.send('Foo Bar!'); 32 | }, 33 | }); 34 | 35 | middlewares.push((req, res) => { 36 | res.send('Hello World!'); 37 | }); 38 | 39 | return middlewares; 40 | }, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /example/locize/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/locize/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | }; 4 | -------------------------------------------------------------------------------- /example/locize/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | .eslintcache -------------------------------------------------------------------------------- /example/locize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "locize", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "i18next-browser-languagedetector": "^8.0.0", 8 | "i18next-locize-backend": "^6.4.3", 9 | "locize": "^3.3.0", 10 | "locize-lastused": "^3.4.1", 11 | "react": "^18.3.1", 12 | "react-dom": "^18.3.1", 13 | "react-i18next": "^15.0.1", 14 | "react-scripts": "^5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": { 23 | "development": [ 24 | "last 2 chrome versions", 25 | "last 2 firefox versions", 26 | "last 2 edge versions" 27 | ], 28 | "production": [ 29 | ">1%", 30 | "last 4 versions", 31 | "Firefox ESR", 32 | "not ie < 11" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/locize/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/locize/public/favicon.ico -------------------------------------------------------------------------------- /example/locize/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/locize/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/locize/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/locize/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render(); 11 | -------------------------------------------------------------------------------- /example/locize/video_sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/locize/video_sample.png -------------------------------------------------------------------------------- /example/locize/video_sample_old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/locize/video_sample_old.png -------------------------------------------------------------------------------- /example/razzle-ssr/.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | .DS_Store 5 | 6 | coverage 7 | node_modules 8 | build 9 | cache 10 | .env.local 11 | .env.development.local 12 | .env.test.local 13 | .env.production.local 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /example/razzle-ssr/README.md: -------------------------------------------------------------------------------- 1 | # Getting started 2 | 3 | Build with [razzle](https://github.com/jaredpalmer/razzle) using its react ssr. 4 | 5 | ```bash 6 | # npm start 7 | ``` 8 | 9 | **open:** 10 | 11 | will detect language: [http://localhost:3000](http://localhost:3000) 12 | 13 | german: [http://localhost:3000/?lng=de](http://localhost:3000/?lng=de) 14 | 15 | english: [http://localhost:3000/?lng=en](http://localhost:3000/?lng=en) 16 | 17 | ## production 18 | 19 | ```bash 20 | # npm run build 21 | # npm run start:prod 22 | ``` 23 | 24 | ## Learn more 25 | 26 | - Uses express to also serve translations for clientside 27 | - Translations are passed down to client on initial serverside render -> no reload of translations, no flickering 28 | - Uses _i18next-http-middleware_ on the serverside to assert that every request gets his own instance of i18next (no race condition conflicts when user b overrides set language in i18next singleton of user a!!!) 29 | - completely allows saveMissing feature of i18next -> added content will be pushed to server and stored in `xyz.missing.json` 30 | -------------------------------------------------------------------------------- /example/razzle-ssr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-razzle-app", 3 | "version": "0.1.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "razzle start", 7 | "build": "razzle build", 8 | "test": "razzle test --env=jsdom", 9 | "start:static": "serve -s build/public", 10 | "start:prod": "NODE_ENV=production node build/server.js" 11 | }, 12 | "dependencies": { 13 | "babel-preset-razzle": "^4.2.18", 14 | "express": "^4.19.2", 15 | "html-webpack-plugin": "^5.6.0", 16 | "i18next": "^23.12.3", 17 | "i18next-browser-languagedetector": "^8.0.0", 18 | "i18next-fs-backend": "^2.3.2", 19 | "i18next-http-backend": "^2.5.2", 20 | "i18next-http-middleware": "^3.6.0", 21 | "mini-css-extract-plugin": "^0.12.0", 22 | "razzle": "^4.2.18", 23 | "razzle-dev-utils": "^4.2.18", 24 | "react": "^17.0.2", 25 | "react-dom": "^17.0.2", 26 | "react-i18next": "^15.0.1", 27 | "react-router-dom": "^5.3.4", 28 | "serve": "^14.2.3", 29 | "webpack": "^5.93.0", 30 | "webpack-dev-server": "^3.11.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/razzle-ssr/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/razzle-ssr/public/favicon.ico -------------------------------------------------------------------------------- /example/razzle-ssr/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | 3 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Switch } from 'react-router-dom'; 3 | import Home from './Home'; 4 | import './App.css'; 5 | 6 | function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/Home.css: -------------------------------------------------------------------------------- 1 | .Home { 2 | text-align: center; 3 | } 4 | 5 | .Home-logo { 6 | animation: Home-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .Home-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .Home-intro { 18 | margin-top: 30px; 19 | font-size: large; 20 | } 21 | 22 | .Home-resources { 23 | list-style: none; 24 | } 25 | 26 | .Home-resources > li { 27 | display: inline-block; 28 | padding: 1rem; 29 | } 30 | 31 | @keyframes Home-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Trans, useTranslation } from 'react-i18next'; 3 | import logo from './react.svg'; 4 | import './Home.css'; 5 | 6 | function Home() { 7 | const [t] = useTranslation('translations'); 8 | 9 | return ( 10 |
11 |
12 | logo 13 |

{t('message.welcome')}

14 |
15 |
16 | 17 | To get started, edit src/App.js or src/Home.js and save to 18 | reload. 19 | 20 |
21 | 32 |
33 | ); 34 | } 35 | 36 | export default Home; 37 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/client.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter } from 'react-router-dom'; 2 | import React, { Suspense } from 'react'; 3 | import { hydrate } from 'react-dom'; 4 | import { useSSR } from 'react-i18next'; 5 | import App from './App'; 6 | import './i18n'; 7 | 8 | const BaseApp = () => { 9 | useSSR(window.initialI18nStore, window.initialLanguage); 10 | return ( 11 | Still loading i18n...}> 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | hydrate(, document.getElementById('root')); 20 | 21 | if (module.hot) { 22 | module.hot.accept(); 23 | } 24 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import { initReactI18next } from 'react-i18next'; 3 | import Backend from 'i18next-http-backend'; 4 | import LanguageDetector from 'i18next-browser-languagedetector'; 5 | 6 | const options = { 7 | fallbackLng: 'en', 8 | supportedLngs: ['en', 'de'], 9 | load: 'languageOnly', // we only provide en, de -> no region specific locals like en-US, de-DE 10 | // have a common namespace used around the full app 11 | ns: ['translations'], 12 | defaultNS: 'translations', 13 | 14 | saveMissing: true, 15 | debug: true, 16 | 17 | interpolation: { 18 | escapeValue: false, // not needed for react!! 19 | formatSeparator: ',', 20 | format: (value, format, lng) => { 21 | if (format === 'uppercase') return value.toUpperCase(); 22 | return value; 23 | }, 24 | }, 25 | useSuspense: process && !process.release, 26 | }; 27 | 28 | // for browser use http backend to load translations and browser lng detector 29 | if (process && !process.release) { 30 | i18n.use(Backend).use(initReactI18next).use(LanguageDetector); 31 | } 32 | 33 | // initialize if not already initialized 34 | if (!i18n.isInitialized) { 35 | i18n.init(options); 36 | } 37 | 38 | export default i18n; 39 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/index.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import app from './server'; 3 | 4 | if (module.hot) { 5 | module.hot.accept('./server', function () { 6 | console.log('🔁 HMR Reloading `./server`...'); 7 | }); 8 | console.info('✅ Server-side HMR Enabled!'); 9 | } 10 | 11 | const port = process.env.PORT || 3000; 12 | 13 | export default express() 14 | .use((req, res) => app.handle(req, res)) 15 | .listen(port, function (err) { 16 | if (err) { 17 | console.error(err); 18 | return; 19 | } 20 | console.log(`> Started on port ${port}`); 21 | }); 22 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/locales/de/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "message": { 3 | "welcome": "Willkommen zu Razzle mit i18n" 4 | }, 5 | "guideline": "Um zu beginnen, ändere <1>src/App.js oder <3>src/Home.js und speichere deine Änderungen um neu zu laden." 6 | } 7 | -------------------------------------------------------------------------------- /example/razzle-ssr/src/locales/en/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "message": { 3 | "welcome": "Welcome to Razzle with i18n" 4 | }, 5 | "guideline": "To get started, edit <1>src/App.js or <3>src/Home.js and save to reload." 6 | } 7 | -------------------------------------------------------------------------------- /example/react-component-lib/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/react-component-lib/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/react-component-lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_usinghooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "i18next-browser-languagedetector": "^8.0.0", 8 | "i18next-http-backend": "^2.5.2", 9 | "react": "^18.3.1", 10 | "react-dom": "^18.3.1", 11 | "react-i18next": "^15.0.1", 12 | "react-scripts": "^5.0.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "development": [ 28 | "last 2 chrome versions", 29 | "last 2 firefox versions", 30 | "last 2 edge versions" 31 | ], 32 | "production": [ 33 | ">1%", 34 | "last 4 versions", 35 | "Firefox ESR", 36 | "not ie < 11" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /example/react-component-lib/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-component-lib/public/favicon.ico -------------------------------------------------------------------------------- /example/react-component-lib/public/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js und speichere um neuzuladen.", 5 | "part2": "Wechsle die Sprache zwischen deutsch und englisch mit Hilfe der beiden Schalter." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react-component-lib/public/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between english and german using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react-component-lib/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/react-component-lib/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/react-component-lib/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | import { i18n as i18nOtherLib } from './other-lib/component'; 6 | 7 | i18n 8 | // load translation using http -> see /public/locales 9 | // learn more: https://github.com/i18next/i18next-http-backend 10 | .use(Backend) 11 | // detect user language 12 | // learn more: https://github.com/i18next/i18next-browser-languageDetector 13 | .use(LanguageDetector) 14 | // pass the i18n instance to react-i18next. 15 | .use(initReactI18next) 16 | // init i18next 17 | // for all options read: https://www.i18next.com/overview/configuration-options 18 | .init({ 19 | fallbackLng: 'en', 20 | debug: true, 21 | 22 | interpolation: { 23 | escapeValue: false, // not needed for react as it escapes by default 24 | }, 25 | }); 26 | 27 | i18n.on('languageChanged', (lng) => { 28 | i18nOtherLib.changeLanguage(lng); 29 | }); 30 | 31 | export default i18n; 32 | -------------------------------------------------------------------------------- /example/react-component-lib/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/react-component-lib/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/react-component-lib/src/other-lib/component.js: -------------------------------------------------------------------------------- 1 | import { I18nextProvider, useTranslation } from 'react-i18next'; 2 | import i18next from './i18n'; 3 | 4 | export const i18n = i18next; 5 | 6 | function Comp() { 7 | const { t } = useTranslation(); 8 | 9 | return
{t('hello')}
; 10 | } 11 | 12 | export function MyCompFromOtherLib() { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /example/react-component-lib/src/other-lib/i18n.js: -------------------------------------------------------------------------------- 1 | import { createInstance } from 'i18next'; 2 | 3 | const i18n = createInstance({ 4 | fallbackLng: 'en', 5 | debug: true, 6 | 7 | interpolation: { 8 | escapeValue: false, // not needed for react as it escapes by default 9 | }, 10 | 11 | resources: { 12 | en: { 13 | translation: { 14 | hello: 'Hello from other i18n instance', 15 | }, 16 | }, 17 | de: { 18 | translation: { 19 | hello: 'Hallo aus einer anderen i18n Instanz', 20 | }, 21 | }, 22 | }, 23 | }); 24 | 25 | i18n.init(); 26 | 27 | export default i18n; 28 | -------------------------------------------------------------------------------- /example/react-fluent/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/react-fluent/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/react-fluent/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_fluent_withhoc", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "i18next-browser-languagedetector": "^8.0.0", 8 | "i18next-fluent": "^2.0.0", 9 | "i18next-fluent-backend": "^1.0.0", 10 | "react": "^18.3.1", 11 | "react-dom": "^18.3.1", 12 | "react-i18next": "^15.0.1", 13 | "react-scripts": "^5.0.1" 14 | }, 15 | "devDependencies": { 16 | "babel-plugin-macros": "^3.1.0" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "development": [ 32 | "last 2 chrome versions", 33 | "last 2 firefox versions", 34 | "last 2 edge versions" 35 | ], 36 | "production": [ 37 | ">1%", 38 | "last 4 versions", 39 | "Firefox ESR", 40 | "not ie < 11" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/react-fluent/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-fluent/public/favicon.ico -------------------------------------------------------------------------------- /example/react-fluent/public/locales/de/translations.ftl: -------------------------------------------------------------------------------- 1 | title = Willkommen zu react und react-i18next mit fluent 2 | 3 | description_1 = Um loszulegen, ändere <1>src/App(DE).js speicheren und neuladen. 4 | description_2 = Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Schalter. 5 | 6 | emails = 7 | { $unreadEmails -> 8 | [one] Du hast <1>eine ungelesene Email. 9 | *[other] Du hast <1>{ $unreadEmails } ungelesene Emails. 10 | } -------------------------------------------------------------------------------- /example/react-fluent/public/locales/en/translations.ftl: -------------------------------------------------------------------------------- 1 | title = Welcome to react using react-i18next with fluent 2 | 3 | description_1 = To get started, edit <1>src/App.js and save to reload. 4 | description_2 = Switch language between english and german using buttons above. 5 | 6 | emails = 7 | { $unreadEmails -> 8 | [one] You have <1>one unread email. 9 | *[other] You have <1>{ $unreadEmails } unread emails. 10 | } -------------------------------------------------------------------------------- /example/react-fluent/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/react-fluent/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/react-fluent/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/react-fluent/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/react-icu/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/react-icu/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/react-icu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_icu", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^6.4.8", 7 | "@testing-library/react": "^16.0.0", 8 | "@testing-library/user-event": "^14.5.2", 9 | "i18next": "^23.12.3", 10 | "i18next-browser-languagedetector": "^8.0.0", 11 | "i18next-http-backend": "^2.5.2", 12 | "i18next-icu": "^2.3.0", 13 | "intl-messageformat": "^10.5.14", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-i18next": "^15.0.1", 17 | "react-scripts": "^5.0.1" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": "react-app" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "babel-plugin-macros": "^3.1.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/react-icu/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-icu/public/favicon.ico -------------------------------------------------------------------------------- /example/react-icu/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-icu/public/logo192.png -------------------------------------------------------------------------------- /example/react-icu/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-icu/public/logo512.png -------------------------------------------------------------------------------- /example/react-icu/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/react-icu/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/react-icu/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/react-icu/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | import './i18n'; 6 | 7 | test('renders learn react link', () => { 8 | const { container } = render(); 9 | 10 | expect(container).toBeInTheDocument(); 11 | }); 12 | -------------------------------------------------------------------------------- /example/react-icu/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | 6 | import ICU from 'i18next-icu'; 7 | 8 | i18n 9 | .use(ICU) 10 | .use(Backend) 11 | .use(LanguageDetector) 12 | .use(initReactI18next) 13 | .init({ 14 | fallbackLng: 'en', 15 | 16 | // have a common namespace used around the full app 17 | ns: ['translations'], 18 | defaultNS: 'translations', 19 | 20 | nsSeparator: false, 21 | keySeparator: false, 22 | 23 | debug: true, 24 | 25 | interpolation: { 26 | escapeValue: false, // not needed for react!! 27 | }, 28 | 29 | react: { 30 | useSuspense: true, 31 | }, 32 | }); 33 | 34 | export default i18n; 35 | -------------------------------------------------------------------------------- /example/react-icu/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /example/react-icu/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | 16 | // If you want your app to work offline and load faster, you can change 17 | // unregister() to register() below. Note this comes with some pitfalls. 18 | // Learn more about service workers: https://bit.ly/CRA-PWA 19 | serviceWorker.unregister(); 20 | -------------------------------------------------------------------------------- /example/react-icu/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /example/react-localstorage/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/react-localstorage/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/react-localstorage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_usinghooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "i18next-browser-languagedetector": "^8.0.0", 8 | "i18next-chained-backend": "^4.6.2", 9 | "i18next-http-backend": "^2.5.2", 10 | "i18next-localstorage-backend": "^4.2.0", 11 | "react": "^18.3.1", 12 | "react-dom": "^18.3.1", 13 | "react-i18next": "^15.0.1", 14 | "react-scripts": "^5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "development": [ 30 | "last 2 chrome versions", 31 | "last 2 firefox versions", 32 | "last 2 edge versions" 33 | ], 34 | "production": [ 35 | ">1%", 36 | "last 4 versions", 37 | "Firefox ESR", 38 | "not ie < 11" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/react-localstorage/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-localstorage/public/favicon.ico -------------------------------------------------------------------------------- /example/react-localstorage/public/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js und speichere um neuzuladen.", 5 | "part2": "Wechsle die Sprache zwischen deutsch und englisch mit Hilfe der beiden Schalter." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react-localstorage/public/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between english and german using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react-localstorage/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/react-localstorage/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/react-localstorage/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import HttpBackend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | import ChainedBackend from 'i18next-chained-backend'; 6 | import LocalStorageBackend from 'i18next-localstorage-backend'; 7 | 8 | i18n 9 | // load translation using http -> see /public/locales 10 | // learn more: https://github.com/i18next/i18next-http-backend 11 | .use(ChainedBackend) 12 | // detect user language 13 | // learn more: https://github.com/i18next/i18next-browser-languageDetector 14 | .use(LanguageDetector) 15 | // pass the i18n instance to react-i18next. 16 | .use(initReactI18next) 17 | // init i18next 18 | // for all options read: https://www.i18next.com/overview/configuration-options 19 | .init({ 20 | fallbackLng: 'en', 21 | debug: true, 22 | 23 | backend: { 24 | backends: [LocalStorageBackend, HttpBackend], 25 | backendOptions: [], 26 | cacheHitMode: 'refreshAndUpdateStore', 27 | }, 28 | 29 | react: { 30 | bindI18nStore: 'added', // this way, when the HttpBackend delivers new translations (thanks to refreshAndUpdateStore), the UI gets updated 31 | }, 32 | }); 33 | 34 | export default i18n; 35 | -------------------------------------------------------------------------------- /example/react-localstorage/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/react-localstorage/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-multi-namespaces", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "react": "^18.3.1", 8 | "react-dom": "^18.3.1", 9 | "react-i18next": "^15.0.1" 10 | }, 11 | "devDependencies": { 12 | "@types/react": "^18.3.3", 13 | "@types/react-dom": "^18.3.0", 14 | "i18next-resources-for-ts": "^1.5.0", 15 | "react-scripts": "^5.0.1", 16 | "typescript": "^5.5.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "eject": "react-scripts eject", 22 | "i18next-resources-for-ts": "i18next-resources-for-ts toc -i ./src/i18n/en -o ./src/@types/resources.ts" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple-multi-namespaces/public/favicon.ico -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple-multi-namespaces/public/logo192.png -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple-multi-namespaces/public/logo512.png -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/@types/i18next.d.ts: -------------------------------------------------------------------------------- 1 | import resources from './resources'; 2 | import { defaultNS } from '../i18n/config'; 3 | 4 | declare module 'i18next' { 5 | interface CustomTypeOptions { 6 | defaultNS: typeof defaultNS; 7 | resources: typeof resources; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/@types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/@types/resources.ts: -------------------------------------------------------------------------------- 1 | import ns1 from '../i18n/en/ns1.json'; 2 | import ns2 from '../i18n/en/ns2.json'; 3 | 4 | const resources = { 5 | ns1, 6 | ns2, 7 | } as const; 8 | 9 | export default resources; 10 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/App.tsx: -------------------------------------------------------------------------------- 1 | import './i18n/config'; 2 | import Comp1 from './components/Comp1'; 3 | import Comp2 from './components/Comp2'; 4 | import Comp3 from './components/Comp3'; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 |
11 | 12 |
13 | 14 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/components/Comp1.tsx: -------------------------------------------------------------------------------- 1 | import { useTranslation } from 'react-i18next'; 2 | 3 | function Comp1() { 4 | const { t } = useTranslation(); 5 | 6 | return ( 7 |
8 |

{t('title')}

9 |

{t('description.part1')}

10 |

{t('description.part2')}

11 |
12 | ); 13 | } 14 | 15 | export default Comp1; 16 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/components/Comp2.tsx: -------------------------------------------------------------------------------- 1 | import { useTranslation } from 'react-i18next'; 2 | 3 | function Comp2() { 4 | const { t } = useTranslation('ns2'); 5 | 6 | return ( 7 |
8 |

{t('description.part1')}

9 |

{t('description.part2')}

10 |
11 | ); 12 | } 13 | 14 | export default Comp2; 15 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/components/Comp3.tsx: -------------------------------------------------------------------------------- 1 | import { useTranslation } from 'react-i18next'; 2 | 3 | function Comp2() { 4 | const { t } = useTranslation(['ns1', 'ns2']); 5 | 6 | return ( 7 |
8 |

{t('description.part1', { ns: 'ns1' })}

9 |

{t('description.part2', { ns: 'ns2' })}

10 |
11 | ); 12 | } 13 | 14 | export default Comp2; 15 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/i18n/config.ts: -------------------------------------------------------------------------------- 1 | import i18next from 'i18next'; 2 | import { initReactI18next } from 'react-i18next'; 3 | import ns1 from './en/ns1.json'; 4 | import ns2 from './en/ns2.json'; 5 | 6 | export const defaultNS = 'ns1'; 7 | 8 | i18next.use(initReactI18next).init({ 9 | lng: 'en', // if you're using a language detector, do not define the lng option 10 | debug: true, 11 | resources: { 12 | en: { 13 | ns1, 14 | ns2, 15 | }, 16 | }, 17 | defaultNS, 18 | }); 19 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/i18n/en/ns1.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next fully type-safe", 3 | "description": { 4 | "part1": "This is a simple example.", 5 | "part2": "😉" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/i18n/en/ns2.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": { 3 | "part1": "In order to infer the appropriate type for t function, you should use type augmentation to override the Resources type.", 4 | "part2": "Check out the @types/i18next to see an example." 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); 7 | root.render( 8 | 9 | 10 | , 11 | ); 12 | -------------------------------------------------------------------------------- /example/react-typescript/simple-multi-namespaces/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /example/react-typescript/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/react-typescript/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^23.12.3", 7 | "react": "^18.3.1", 8 | "react-dom": "^18.3.1", 9 | "react-i18next": "^15.0.1" 10 | }, 11 | "devDependencies": { 12 | "@types/react": "^18.3.3", 13 | "@types/react-dom": "^18.3.0", 14 | "i18next-resources-for-ts": "^1.5.0", 15 | "react-scripts": "^5.0.1", 16 | "typescript": "^5.5.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "eject": "react-scripts eject", 22 | "i18next-resources-for-ts": "i18next-resources-for-ts toc -i ./src/i18n/en -o ./src/@types/resources.ts" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/react-typescript/simple/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple/public/favicon.ico -------------------------------------------------------------------------------- /example/react-typescript/simple/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple/public/logo192.png -------------------------------------------------------------------------------- /example/react-typescript/simple/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react-typescript/simple/public/logo512.png -------------------------------------------------------------------------------- /example/react-typescript/simple/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/react-typescript/simple/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/@types/i18next.d.ts: -------------------------------------------------------------------------------- 1 | import resources from './resources'; 2 | 3 | declare module 'i18next' { 4 | interface CustomTypeOptions { 5 | resources: typeof resources; 6 | // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz" 7 | // set returnNull to false (and also in the i18next init options) 8 | // returnNull: false; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/@types/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/@types/resources.ts: -------------------------------------------------------------------------------- 1 | import translation from '../i18n/en/translation.json'; 2 | 3 | const resources = { 4 | translation, 5 | } as const; 6 | 7 | export default resources; 8 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/App.tsx: -------------------------------------------------------------------------------- 1 | import './i18n/config'; 2 | import { useTranslation, Trans } from 'react-i18next'; 3 | 4 | function App() { 5 | const { t } = useTranslation(); 6 | 7 | const count = 3; 8 | 9 | return ( 10 |
11 |

{t('title', { name: 'John' })}

12 |

{t('description.part1')}

13 |

{t('description.part2')}

14 | 15 | You have {{ count }} unread message. 16 | 17 |
18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/i18n/config.ts: -------------------------------------------------------------------------------- 1 | import i18next from 'i18next'; 2 | import { initReactI18next } from 'react-i18next'; 3 | import translation from './en/translation.json'; 4 | 5 | i18next.use(initReactI18next).init({ 6 | lng: 'en', // if you're using a language detector, do not define the lng option 7 | debug: true, 8 | resources: { 9 | en: { 10 | translation, 11 | }, 12 | }, 13 | // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz" 14 | // set returnNull to false (and also in the i18next.d.ts options) 15 | // returnNull: false, 16 | }); 17 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/i18n/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome {{name}}, to react using react-i18next fully type-safe", 3 | "description": { 4 | "part1": "This is a simple example.", 5 | "part2": "😉" 6 | }, 7 | "userMessagesUnread_one": "You have {{count}} unread message.", 8 | "userMessagesUnread_other": "You have {{count}} unread messages." 9 | } 10 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /example/react-typescript/simple/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); 7 | root.render( 8 | 9 | 10 | , 11 | ); 12 | -------------------------------------------------------------------------------- /example/react-typescript/simple/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /example/react/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_usinghooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "^24.2.0", 7 | "i18next-browser-languagedetector": "^8.0.2", 8 | "i18next-http-backend": "^3.0.1", 9 | "react": "^19.0.0", 10 | "react-dom": "^19.0.0", 11 | "react-i18next": "^15.2.0", 12 | "react-scripts": "^5.0.1" 13 | }, 14 | "overrides": { 15 | "typescript": "5.7.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "development": [ 31 | "last 2 chrome versions", 32 | "last 2 firefox versions", 33 | "last 2 edge versions" 34 | ], 35 | "production": [ 36 | ">1%", 37 | "last 4 versions", 38 | "Firefox ESR", 39 | "not ie < 11" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /example/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react/public/favicon.ico -------------------------------------------------------------------------------- /example/react/public/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js und speichere um neuzuladen.", 5 | "part2": "Wechsle die Sprache zwischen deutsch und englisch mit Hilfe der beiden Schalter." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react/public/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between english and german using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/react/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | 6 | i18n 7 | // load translation using http -> see /public/locales 8 | // learn more: https://github.com/i18next/i18next-http-backend 9 | .use(Backend) 10 | // detect user language 11 | // learn more: https://github.com/i18next/i18next-browser-languageDetector 12 | .use(LanguageDetector) 13 | // pass the i18n instance to react-i18next. 14 | .use(initReactI18next) 15 | // init i18next 16 | // for all options read: https://www.i18next.com/overview/configuration-options 17 | .init({ 18 | fallbackLng: 'en', 19 | debug: true, 20 | }); 21 | 22 | export default i18n; 23 | -------------------------------------------------------------------------------- /example/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | const root = createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/react_native_windows/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/react_native_windows/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /example/react_native_windows/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example/react_native_windows/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /example/react_native_windows/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc.json", 3 | "bracketSpacing": false, 4 | "bracketSameLine": true, 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /example/react_native_windows/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/react_native_windows/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/debug.keystore -------------------------------------------------------------------------------- /example/react_native_windows/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/java/com/react_native_windows/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.react_native_windows; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "react_native_windows"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | react_native_windows 3 | 4 | -------------------------------------------------------------------------------- /example/react_native_windows/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/react_native_windows/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 16 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | mavenLocal() 24 | maven { 25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 26 | url("$rootDir/../node_modules/react-native/android") 27 | } 28 | maven { 29 | // Android JSC is installed from npm 30 | url("$rootDir/../node_modules/jsc-android/dist") 31 | } 32 | 33 | google() 34 | jcenter() 35 | maven { url 'https://www.jitpack.io' } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /example/react_native_windows/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/react_native_windows/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/react_native_windows/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'react_native_windows' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /example/react_native_windows/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_native_windows", 3 | "displayName": "react_native_windows" 4 | } 5 | -------------------------------------------------------------------------------- /example/react_native_windows/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/react_native_windows/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '10.0' 5 | 6 | target 'react_native_windows' do 7 | config = use_native_modules! 8 | 9 | use_react_native!(:path => config["reactNativePath"]) 10 | 11 | target 'react_native_windowsTests' do 12 | inherit! :complete 13 | # Pods for testing 14 | end 15 | 16 | # Enables Flipper. 17 | # 18 | # Note that if you have use_frameworks! enabled, Flipper will not work and 19 | # you should disable these next few lines. 20 | use_flipper! 21 | post_install do |installer| 22 | flipper_post_install(installer) 23 | end 24 | end 25 | 26 | target 'react_native_windows-tvOS' do 27 | # Pods for react_native_windows-tvOS 28 | 29 | target 'react_native_windows-tvOSTests' do 30 | inherit! :search_paths 31 | # Pods for testing 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windows-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windows/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windows/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "iphone", 5 | "size": "29x29", 6 | "scale": "2x" 7 | }, 8 | { 9 | "idiom": "iphone", 10 | "size": "29x29", 11 | "scale": "3x" 12 | }, 13 | { 14 | "idiom": "iphone", 15 | "size": "40x40", 16 | "scale": "2x" 17 | }, 18 | { 19 | "idiom": "iphone", 20 | "size": "40x40", 21 | "scale": "3x" 22 | }, 23 | { 24 | "idiom": "iphone", 25 | "size": "60x60", 26 | "scale": "2x" 27 | }, 28 | { 29 | "idiom": "iphone", 30 | "size": "60x60", 31 | "scale": "3x" 32 | } 33 | ], 34 | "info": { 35 | "version": 1, 36 | "author": "xcode" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windows/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "version": 1, 4 | "author": "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windows/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/react_native_windows/ios/react_native_windowsTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/.gitignore: -------------------------------------------------------------------------------- 1 | # CocoaPods 2 | Pods/ 3 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-iOS/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-iOS/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "iphone", 5 | "size": "29x29", 6 | "scale": "2x" 7 | }, 8 | { 9 | "idiom": "iphone", 10 | "size": "29x29", 11 | "scale": "3x" 12 | }, 13 | { 14 | "idiom": "iphone", 15 | "size": "40x40", 16 | "scale": "2x" 17 | }, 18 | { 19 | "idiom": "iphone", 20 | "size": "40x40", 21 | "scale": "3x" 22 | }, 23 | { 24 | "idiom": "iphone", 25 | "size": "60x60", 26 | "scale": "2x" 27 | }, 28 | { 29 | "idiom": "iphone", 30 | "size": "60x60", 31 | "scale": "3x" 32 | } 33 | ], 34 | "info": { 35 | "version": 1, 36 | "author": "xcode" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-iOS/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "version": 1, 4 | "author": "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-iOS/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @class RCTBridge; 4 | 5 | @interface AppDelegate : NSObject 6 | 7 | @property (nonatomic, readonly) RCTBridge *bridge; 8 | 9 | @end 10 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | 6 | @interface AppDelegate () 7 | 8 | @end 9 | 10 | @implementation AppDelegate 11 | 12 | - (void)awakeFromNib { 13 | [super awakeFromNib]; 14 | 15 | _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil]; 16 | } 17 | 18 | - (void)applicationDidFinishLaunching:(NSNotification *)aNotification { 19 | // Insert code here to initialize your application 20 | } 21 | 22 | - (void)applicationWillTerminate:(NSNotification *)aNotification { 23 | // Insert code here to tear down your application 24 | } 25 | 26 | #pragma mark - RCTBridgeDelegate Methods 27 | 28 | - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge { 29 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:@"main"]; // .jsbundle; 30 | } 31 | 32 | @end 33 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "mac", 5 | "scale": "1x", 6 | "size": "16x16" 7 | }, 8 | { 9 | "idiom": "mac", 10 | "scale": "2x", 11 | "size": "16x16" 12 | }, 13 | { 14 | "idiom": "mac", 15 | "scale": "1x", 16 | "size": "32x32" 17 | }, 18 | { 19 | "idiom": "mac", 20 | "scale": "2x", 21 | "size": "32x32" 22 | }, 23 | { 24 | "idiom": "mac", 25 | "scale": "1x", 26 | "size": "128x128" 27 | }, 28 | { 29 | "idiom": "mac", 30 | "scale": "2x", 31 | "size": "128x128" 32 | }, 33 | { 34 | "idiom": "mac", 35 | "scale": "1x", 36 | "size": "256x256" 37 | }, 38 | { 39 | "idiom": "mac", 40 | "scale": "2x", 41 | "size": "256x256" 42 | }, 43 | { 44 | "idiom": "mac", 45 | "scale": "1x", 46 | "size": "512x512" 47 | }, 48 | { 49 | "idiom": "mac", 50 | "scale": "2x", 51 | "size": "512x512" 52 | } 53 | ], 54 | "info": { 55 | "author": "xcode", 56 | "version": 1 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info": { 3 | "author": "xcode", 4 | "version": 1 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/ViewController.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface ViewController : NSViewController 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/ViewController.m: -------------------------------------------------------------------------------- 1 | #import "ViewController.h" 2 | #import "AppDelegate.h" 3 | 4 | #import 5 | 6 | @implementation ViewController 7 | 8 | - (void)viewDidLoad { 9 | [super viewDidLoad]; 10 | 11 | RCTBridge *bridge = [((AppDelegate *)[NSApp delegate])bridge]; 12 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"react_native_windows" initialProperties:nil]; 13 | 14 | NSView *view = [self view]; 15 | 16 | [view addSubview:rootView]; 17 | [rootView setBackgroundColor:[NSColor windowBackgroundColor]]; 18 | [rootView setFrame:[view bounds]]; 19 | [rootView setAutoresizingMask:(NSViewMinXMargin | NSViewMinXMargin | NSViewMinYMargin | NSViewMaxYMargin | NSViewWidthSizable | NSViewHeightSizable)]; 20 | } 21 | 22 | @end 23 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | int main(int argc, const char *argv[]) { 4 | return NSApplicationMain(argc, argv); 5 | } 6 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows-macOS/react_native_windows.entitlements: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | com.apple.security.app-sandbox 6 | 7 | com.apple.security.files.user-selected.read-only 8 | 9 | com.apple.security.network.client 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /example/react_native_windows/macos/react_native_windows.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/react_native_windows/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | const path = require('path'); 8 | const blacklist = require('metro-config/src/defaults/blacklist'); 9 | 10 | module.exports = { 11 | resolver: { 12 | blacklistRE: blacklist([ 13 | // This stops "react-native run-windows" from causing the metro server to crash if its already running 14 | new RegExp( 15 | `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`, 16 | ), 17 | // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip 18 | /.*\.ProjectImports\.zip/, 19 | ]), 20 | }, 21 | transformer: { 22 | getTransformOptions: async () => ({ 23 | transform: { 24 | experimentalImportSupport: false, 25 | inlineRequires: false, 26 | }, 27 | }), 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /example/react_native_windows/metro.config.macos.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This cli config is needed for development purposes, e.g. for running 3 | * integration tests during local development or on CI services. 4 | */ 5 | 6 | const path = require('path'); 7 | const blacklist = require('metro-config/src/defaults/blacklist'); 8 | 9 | const rnmPath = path.resolve(__dirname, 'node_modules/react-native-macos'); 10 | 11 | module.exports = { 12 | resolver: { 13 | extraNodeModules: { 14 | 'react-native': rnmPath, 15 | }, 16 | platforms: ['macos', 'ios', 'android'], 17 | blacklistRE: blacklist([/node_modules\/react-native\/.*/]), 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /example/react_native_windows/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_native_windows", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "start:macos": "react-native run-macos", 10 | "start:windows": "react-native run-macos", 11 | "test": "jest", 12 | "lint": "eslint ." 13 | }, 14 | "dependencies": { 15 | "i18next": "20.0.0", 16 | "react": "16.13.1", 17 | "react-i18next": "11.7.3", 18 | "react-native": "0.63.3", 19 | "react-native-macos": "^0.62.0-0", 20 | "react-native-windows": "^0.63.0-0" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.8.4", 24 | "@babel/runtime": "^7.8.4", 25 | "@react-native-community/eslint-config": "^1.1.0", 26 | "babel-jest": "^25.1.0", 27 | "eslint": "^6.5.1", 28 | "jest": "^25.1.0", 29 | "metro-react-native-babel-preset": "^0.59.0", 30 | "react-test-renderer": "16.13.1" 31 | }, 32 | "jest": { 33 | "preset": "react-native" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/react_native_windows/react-native.config.js: -------------------------------------------------------------------------------- 1 | const macSwitch = '--use-react-native-macos'; 2 | 3 | if (process.argv.includes(macSwitch)) { 4 | process.argv = process.argv.filter((arg) => arg !== macSwitch); 5 | process.argv.push('--config=metro.config.macos.js'); 6 | module.exports = { 7 | reactNativePath: 'node_modules/react-native-macos', 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/.gitignore: -------------------------------------------------------------------------------- 1 | *AppPackages* 2 | *BundleArtifacts* 3 | 4 | #OS junk files 5 | [Tt]humbs.db 6 | *.DS_Store 7 | 8 | #Visual Studio files 9 | *.[Oo]bj 10 | *.user 11 | *.aps 12 | *.pch 13 | *.vspscc 14 | *.vssscc 15 | *_i.c 16 | *_p.c 17 | *.ncb 18 | *.suo 19 | *.tlb 20 | *.tlh 21 | *.bak 22 | *.[Cc]ache 23 | *.ilk 24 | *.log 25 | *.lib 26 | *.sbr 27 | *.sdf 28 | *.opensdf 29 | *.opendb 30 | *.unsuccessfulbuild 31 | ipch/ 32 | [Oo]bj/ 33 | [Bb]in 34 | [Dd]ebug*/ 35 | [Rr]elease*/ 36 | Ankh.NoLoad 37 | 38 | # Visual C++ cache files 39 | ipch/ 40 | *.aps 41 | *.ncb 42 | *.opendb 43 | *.opensdf 44 | *.sdf 45 | *.cachefile 46 | *.VC.db 47 | *.VC.VC.opendb 48 | 49 | #MonoDevelop 50 | *.pidb 51 | *.userprefs 52 | 53 | #Tooling 54 | _ReSharper*/ 55 | *.resharper 56 | [Tt]est[Rr]esult* 57 | *.sass-cache 58 | 59 | #Project files 60 | [Bb]uild/ 61 | 62 | #Subversion files 63 | .svn 64 | 65 | # Office Temp Files 66 | ~$* 67 | 68 | # vim Temp Files 69 | *~ 70 | 71 | #NuGet 72 | packages/ 73 | *.nupkg 74 | 75 | #ncrunch 76 | *ncrunch* 77 | *crunch*.local.xml 78 | 79 | # visual studio database projects 80 | *.dbmdl 81 | 82 | #Test files 83 | *.testsettings 84 | 85 | #Other files 86 | *.DotSettings 87 | .vs/ 88 | *project.lock.json 89 | 90 | #Files generated by the VS build 91 | **/Generated Files/** 92 | 93 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/.gitignore: -------------------------------------------------------------------------------- 1 | /Bundle 2 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/App.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include "App.xaml.g.h" 4 | 5 | namespace activation = winrt::Windows::ApplicationModel::Activation; 6 | 7 | namespace winrt::react_native_windows::implementation 8 | { 9 | struct App : AppT 10 | { 11 | App() noexcept; 12 | void OnLaunched(activation::LaunchActivatedEventArgs const&); 13 | void OnSuspending(IInspectable const&, Windows::ApplicationModel::SuspendingEventArgs const&); 14 | void OnNavigationFailed(IInspectable const&, Windows::UI::Xaml::Navigation::NavigationFailedEventArgs const&); 15 | private: 16 | using super = AppT; 17 | }; 18 | } // namespace winrt::react_native_windows::implementation 19 | 20 | 21 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/App.idl: -------------------------------------------------------------------------------- 1 | namespace react_native_windows 2 | { 3 | } 4 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/App.xaml: -------------------------------------------------------------------------------- 1 |  7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/LockScreenLogo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/LockScreenLogo.scale-200.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/SplashScreen.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/SplashScreen.scale-200.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/Square150x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/Square150x150Logo.scale-200.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/Square44x44Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/Square44x44Logo.scale-200.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/Square44x44Logo.targetsize-24_altform-unplated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/Square44x44Logo.targetsize-24_altform-unplated.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/StoreLogo.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/Assets/Wide310x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/react_native_windows/windows/react_native_windows/Assets/Wide310x150Logo.scale-200.png -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/AutolinkedNativeModules.g.cpp: -------------------------------------------------------------------------------- 1 | // AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows" 2 | // clang-format off 3 | #include "pch.h" 4 | #include "AutolinkedNativeModules.g.h" 5 | 6 | namespace winrt::Microsoft::ReactNative 7 | { 8 | 9 | void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders) 10 | { 11 | UNREFERENCED_PARAMETER(packageProviders); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/AutolinkedNativeModules.g.h: -------------------------------------------------------------------------------- 1 | // AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows" 2 | 3 | #pragma once 4 | 5 | namespace winrt::Microsoft::ReactNative 6 | { 7 | 8 | void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders); 9 | 10 | } 11 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/AutolinkedNativeModules.g.targets: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/MainPage.cpp: -------------------------------------------------------------------------------- 1 | #include "pch.h" 2 | #include "MainPage.h" 3 | #if __has_include("MainPage.g.cpp") 4 | #include "MainPage.g.cpp" 5 | #endif 6 | 7 | #include "App.h" 8 | 9 | 10 | 11 | using namespace winrt; 12 | using namespace Windows::UI::Xaml; 13 | 14 | namespace winrt::react_native_windows::implementation 15 | { 16 | MainPage::MainPage() 17 | { 18 | InitializeComponent(); 19 | auto app = Application::Current().as(); 20 | ReactRootView().ReactNativeHost(app->Host()); 21 | } 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/MainPage.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "MainPage.g.h" 3 | #include 4 | 5 | 6 | namespace winrt::react_native_windows::implementation 7 | { 8 | struct MainPage : MainPageT 9 | { 10 | MainPage(); 11 | }; 12 | } 13 | 14 | namespace winrt::react_native_windows::factory_implementation 15 | { 16 | struct MainPage : MainPageT 17 | { 18 | }; 19 | } 20 | 21 | 22 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/MainPage.idl: -------------------------------------------------------------------------------- 1 | namespace react_native_windows 2 | { 3 | [default_interface] 4 | runtimeclass MainPage : Windows.UI.Xaml.Controls.Page 5 | { 6 | MainPage(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/MainPage.xaml: -------------------------------------------------------------------------------- 1 | 11 | 16 | 17 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/PropertySheet.props: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/ReactPackageProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "pch.h" 2 | #include "ReactPackageProvider.h" 3 | #include "NativeModules.h" 4 | 5 | 6 | using namespace winrt::Microsoft::ReactNative; 7 | 8 | namespace winrt::react_native_windows::implementation 9 | { 10 | 11 | void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept 12 | { 13 | AddAttributedModules(packageBuilder); 14 | } 15 | 16 | } // namespace winrt::react_native_windows::implementation 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/ReactPackageProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include "winrt/Microsoft.ReactNative.h" 4 | 5 | 6 | namespace winrt::react_native_windows::implementation 7 | { 8 | struct ReactPackageProvider : winrt::implements 9 | { 10 | public: // IReactPackageProvider 11 | void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept; 12 | }; 13 | } // namespace winrt::react_native_windows::implementation 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/pch.cpp: -------------------------------------------------------------------------------- 1 | #include "pch.h" 2 | -------------------------------------------------------------------------------- /example/react_native_windows/windows/react_native_windows/pch.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #define NOMINMAX 4 | 5 | #include 6 | #include 7 | #include 8 | #include 9 | #include 10 | #include 11 | #include 12 | #include 13 | #include 14 | #include 15 | #include 16 | #include 17 | #include 18 | #include 19 | 20 | #include 21 | 22 | #include 23 | #include 24 | #include 25 | #include 26 | #include 27 | -------------------------------------------------------------------------------- /example/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/storybook/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 4 | }; 5 | -------------------------------------------------------------------------------- /example/storybook/README.md: -------------------------------------------------------------------------------- 1 | # react-i18next in Storybook 2 | 3 | This is an example application using `react-i18next` in Storybook including a menu in the toolbar to change the 4 | locale of your stories. 5 | 6 | ![Storybook example](./docs/storybook-example.gif) 7 | 8 | ## 🏁 Getting started 9 | 10 | ```bash 11 | # Install dependencies 12 | yarn install 13 | 14 | # Start the React app 15 | yarn start 16 | 17 | # Start Storybook 18 | yarn storybook 19 | ``` 20 | -------------------------------------------------------------------------------- /example/storybook/docs/storybook-example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/storybook/docs/storybook-example.gif -------------------------------------------------------------------------------- /example/storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "storybook", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "i18next": "20.3.1", 7 | "i18next-browser-languagedetector": "6.1.1", 8 | "i18next-http-backend": "1.2.6", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-i18next": "^11.10.0", 12 | "react-scripts": "4.0.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject", 19 | "storybook": "start-storybook -p 9009 -s public", 20 | "build-storybook": "build-storybook -s public" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ], 31 | "devDependencies": { 32 | "@babel/core": "^7.14.3", 33 | "@storybook/addon-actions": "^6.5.10", 34 | "@storybook/addon-essentials": "^6.5.10", 35 | "@storybook/addon-links": "^6.5.10", 36 | "@storybook/addons": "^6.5.10", 37 | "@storybook/react": "^6.5.10", 38 | "babel-loader": "8.1.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /example/storybook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/storybook/public/favicon.ico -------------------------------------------------------------------------------- /example/storybook/public/locales/ar/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "مرحبًا بكم في التفاعل باستخدام رد فعل i18next", 3 | "description": { 4 | "part1": "للبدء ، قم بتحرير <1> src / App.js وحفظه لإعادة التحميل.", 5 | "part2": "قم بتبديل اللغة بين الإنجليزية والألمانية والعربية باستخدام الأزرار أعلاه." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/storybook/public/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js speicheren und neuladen.", 5 | "part2": "Wechseln Sie mit den Schaltflächen oben zwischen Englisch, Deutsch und Arabisch." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/storybook/public/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between English, German, and Arabic using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/storybook/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/storybook/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 50vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/storybook/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | 6 | i18n 7 | // load translation using http -> see /public/locales 8 | // learn more: https://github.com/i18next/i18next-http-backend 9 | .use(Backend) 10 | // detect user language 11 | // learn more: https://github.com/i18next/i18next-browser-languageDetector 12 | .use(LanguageDetector) 13 | // pass the i18n instance to react-i18next. 14 | .use(initReactI18next) 15 | // init i18next 16 | // for all options read: https://www.i18next.com/overview/configuration-options 17 | .init({ 18 | fallbackLng: 'en', 19 | debug: true, 20 | interpolation: { 21 | escapeValue: false, // not needed for react as it escapes by default 22 | }, 23 | }); 24 | 25 | export default i18n; 26 | -------------------------------------------------------------------------------- /example/storybook/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 5 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /example/storybook/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | // import i18n (needs to be bundled ;)) 7 | import './i18n'; 8 | 9 | ReactDOM.render(, document.getElementById('root')); 10 | -------------------------------------------------------------------------------- /example/storybook/src/stories/app.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from '../App'; 3 | 4 | // for this case we have set i18n.use(initReactI18next) in '../src/i18n' so no I18nextProvicer is needed to pass i18n down via context api 5 | export default { 6 | title: 'Full App', 7 | component: App, 8 | }; 9 | 10 | export const Default = () => ; 11 | 12 | // learn more: 13 | // https://react.i18next.com/components/overview#getting-the-t-function 14 | -------------------------------------------------------------------------------- /example/storybook/src/stories/components.stories.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Suspense } from 'react'; 2 | import { useTranslation, withTranslation, Trans } from 'react-i18next'; 3 | 4 | class ClassComponent extends Component { 5 | render() { 6 | const { t } = this.props; 7 | return

{t('title')}

; 8 | } 9 | } 10 | 11 | const ComponentUsingHOC = withTranslation()(ClassComponent); 12 | 13 | function ComponentUsingHook() { 14 | const { t } = useTranslation(); 15 | return
{t('description.part2')}
; 16 | } 17 | 18 | function ComponentUsingTrans() { 19 | return ( 20 | 21 | To get started, edit src/App.js and save to reload. 22 | 23 | ); 24 | } 25 | 26 | export default { 27 | title: 'Components', 28 | }; 29 | export const Mocking = () => k} />; 30 | Mocking.storyName = 'Mocking t()'; 31 | 32 | export const UsingHOC = () => ; 33 | export const UsingHook = () => ; 34 | export const UsingTransComponent = () => ; 35 | -------------------------------------------------------------------------------- /example/test-jest/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /example/test-jest/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /example/test-jest/README.md: -------------------------------------------------------------------------------- 1 | ### Intro 2 | 3 | `./__mocks__` contains the react-i18next mock (mocks translate and Trans; mock other components as needed!!!) 4 | 5 | `./src/setupTests.js` sets adapter for using enzyme 6 | 7 | `./src/App.test.js` basic test from create-react-app 8 | `./src/MyComponent.test.js` test using enzyme 9 | -------------------------------------------------------------------------------- /example/test-jest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-jest", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "enzyme": "3.11.0", 7 | "@cfaester/enzyme-adapter-react-18": "0.6.0", 8 | "i18next": "22.4.11", 9 | "i18next-browser-languagedetector": "7.0.1", 10 | "i18next-http-backend": "2.1.1", 11 | "react": "18.2.0", 12 | "react-dom": "18.2.0", 13 | "react-i18next": "12.2.0", 14 | "react-scripts": "5.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/test-jest/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/i18next/react-i18next/194e75db66bd6969688c51ba782d124600e42af6/example/test-jest/public/favicon.ico -------------------------------------------------------------------------------- /example/test-jest/public/locales/de/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Willkommen zu react und react-i18next", 3 | "description": { 4 | "part1": "Um loszulegen, ändere <1>src/App(DE).js speicheren und neuladen.", 5 | "part2": "Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Schalter." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/test-jest/public/locales/en/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Welcome to react using react-i18next", 3 | "description": { 4 | "part1": "To get started, edit <1>src/App.js and save to reload.", 5 | "part2": "Switch language between english and german using buttons above." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/test-jest/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/test-jest/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/test-jest/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const root = createRoot(document.createElement('div')); 7 | root.render(); 8 | root.unmount(); 9 | }); 10 | -------------------------------------------------------------------------------- /example/test-jest/src/Trans.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useTranslation, Trans } from 'react-i18next'; 3 | 4 | export default function CustomComponent() { 5 | const { t } = useTranslation(); 6 | 7 | return ( 8 |
9 | 10 | description.part5 description.bold 11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /example/test-jest/src/Trans.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import ComponentTrans from './Trans'; 4 | 5 | it('test render', () => { 6 | const mounted = mount(); 7 | 8 | // console.log(mounted.debug()); 9 | expect(mounted.contains(description.bold)).toBe(true); 10 | }); 11 | -------------------------------------------------------------------------------- /example/test-jest/src/Translation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Translation } from 'react-i18next'; 3 | 4 | export default function CustomComponent() { 5 | return {(t) =>
{t('description.part4')}
}; 6 | } 7 | -------------------------------------------------------------------------------- /example/test-jest/src/Translation.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import ComponentTranslation from './Translation'; 4 | 5 | it('test render', () => { 6 | const mounted = mount(); 7 | 8 | // console.log(mounted.debug()); 9 | expect(mounted.contains(
description.part4
)).toBe(true); 10 | }); 11 | -------------------------------------------------------------------------------- /example/test-jest/src/UseTranslation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useTranslation } from 'react-i18next'; 3 | 4 | export default function CustomComponent() { 5 | const { t } = useTranslation(); 6 | 7 | return
{t('description.part2')}
; 8 | } 9 | -------------------------------------------------------------------------------- /example/test-jest/src/UseTranslation.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import ComponentUseTranslation from './UseTranslation'; 4 | 5 | it('test render', () => { 6 | const mounted = mount(); 7 | 8 | // console.log(mounted.debug()); 9 | expect(mounted.contains(
description.part2
)).toBe(true); 10 | }); 11 | -------------------------------------------------------------------------------- /example/test-jest/src/UseTranslationWithInterpolation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useTranslation } from 'react-i18next'; 3 | 4 | export default function CustomComponent() { 5 | const { t } = useTranslation(); 6 | 7 | return
{t('some.key', { some: 'variable' })}
; 8 | } 9 | -------------------------------------------------------------------------------- /example/test-jest/src/UseTranslationWithInterpolation.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import UseTranslationWithInterpolation from './UseTranslationWithInterpolation'; 4 | import { useTranslation } from 'react-i18next'; 5 | 6 | jest.mock('react-i18next', () => ({ 7 | useTranslation: jest.fn(), 8 | })); 9 | 10 | it('test render', () => { 11 | const useTranslationSpy = useTranslation; 12 | const tSpy = jest.fn((str) => str); 13 | useTranslationSpy.mockReturnValue({ 14 | t: tSpy, 15 | i18n: { 16 | changeLanguage: () => new Promise(() => {}), 17 | }, 18 | }); 19 | 20 | const mounted = mount(); 21 | 22 | // console.log(mounted.debug()); 23 | expect(mounted.contains(
some.key
)).toBe(true); 24 | 25 | // If you want you can also check how the t function has been called, 26 | // but basically this is testing your mock and not the actual code. 27 | expect(tSpy).toHaveBeenCalledTimes(1); 28 | expect(tSpy).toHaveBeenLastCalledWith('some.key', { some: 'variable' }); 29 | }); 30 | -------------------------------------------------------------------------------- /example/test-jest/src/WithTranslation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withTranslation } from 'react-i18next'; 3 | 4 | export function CustomComponent({ t }) { 5 | return
{t('description.part3')}
; 6 | } 7 | 8 | export default withTranslation()(CustomComponent); 9 | -------------------------------------------------------------------------------- /example/test-jest/src/WithTranslation.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import ComponentWithTranslation from './WithTranslation'; 4 | 5 | it('test render', () => { 6 | const mounted = mount(); 7 | 8 | // console.log(mounted.debug()); 9 | expect(mounted.contains(
description.part3
)).toBe(true); 10 | }); 11 | -------------------------------------------------------------------------------- /example/test-jest/src/i18n.js: -------------------------------------------------------------------------------- 1 | import i18n from 'i18next'; 2 | import Backend from 'i18next-http-backend'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | import { initReactI18next } from 'react-i18next'; 5 | 6 | i18n 7 | .use(Backend) 8 | .use(LanguageDetector) 9 | .use(initReactI18next) 10 | .init({ 11 | fallbackLng: 'en', 12 | 13 | // have a common namespace used around the full app 14 | ns: ['translations'], 15 | defaultNS: 'translations', 16 | 17 | debug: true, 18 | 19 | interpolation: { 20 | escapeValue: false, // not needed for react!! 21 | }, 22 | }); 23 | 24 | export default i18n; 25 | -------------------------------------------------------------------------------- /example/test-jest/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /example/test-jest/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | import './i18n'; 7 | 8 | const root = createRoot(document.getElementById('root')); 9 | root.render(); 10 | -------------------------------------------------------------------------------- /example/test-jest/src/setupTests.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme'; 2 | import Adapter from '@cfaester/enzyme-adapter-react-18'; 3 | 4 | // without stubbing do this: 5 | // import i18n from 'i18next'; 6 | // import { initReactI18next } from 'react-i18next'; 7 | 8 | // i18n.use(initReactI18next).init({ 9 | // lng: 'en', 10 | // fallbackLng: 'en', 11 | 12 | // // have a common namespace used around the full app 13 | // ns: ['translations'], 14 | // defaultNS: 'translations', 15 | 16 | // // debug: true, 17 | 18 | // interpolation: { 19 | // escapeValue: false, // not needed for react!! 20 | // }, 21 | 22 | // resources: { en: { translations: {} } }, 23 | // }); 24 | 25 | Enzyme.configure({ adapter: new Adapter() }); 26 | -------------------------------------------------------------------------------- /helpers.d.ts: -------------------------------------------------------------------------------- 1 | // Internal Helpers 2 | export type $Tuple = readonly [T?, ...T[]]; 3 | export type $Subtract = Omit; 4 | -------------------------------------------------------------------------------- /icu.macro.d.mts: -------------------------------------------------------------------------------- 1 | export * from './icu.macro.js'; 2 | -------------------------------------------------------------------------------- /index.d.mts: -------------------------------------------------------------------------------- 1 | export * from './index.js'; 2 | -------------------------------------------------------------------------------- /initReactI18next.d.mts: -------------------------------------------------------------------------------- 1 | export * from './initReactI18next.js'; 2 | -------------------------------------------------------------------------------- /initReactI18next.d.ts: -------------------------------------------------------------------------------- 1 | import type { ThirdPartyModule } from 'i18next'; 2 | 3 | export const initReactI18next: ThirdPartyModule; 4 | -------------------------------------------------------------------------------- /lint-staged.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | '!*.?(c|m){js,ts}?(x)': ['prettier --write --ignore-unknown'], 3 | '*.?(c|m){js,ts}?(x)': ['prettier --write --ignore-unknown', 'eslint --cache --fix --env-info'], 4 | }; 5 | -------------------------------------------------------------------------------- /src/I18nextProvider.js: -------------------------------------------------------------------------------- 1 | import { createElement, useMemo } from 'react'; 2 | import { I18nContext } from './context.js'; 3 | 4 | export function I18nextProvider({ i18n, defaultNS, children }) { 5 | const value = useMemo(() => ({ i18n, defaultNS }), [i18n, defaultNS]); 6 | return createElement(I18nContext.Provider, { value }, children); 7 | } 8 | -------------------------------------------------------------------------------- /src/Trans.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { nodesToString, Trans as TransWithoutContext } from './TransWithoutContext.js'; 3 | import { getI18n, I18nContext } from './context.js'; 4 | 5 | export { nodesToString }; 6 | 7 | export function Trans({ 8 | children, 9 | count, 10 | parent, 11 | i18nKey, 12 | context, 13 | tOptions = {}, 14 | values, 15 | defaults, 16 | components, 17 | ns, 18 | i18n: i18nFromProps, 19 | t: tFromProps, 20 | shouldUnescape, 21 | ...additionalProps 22 | }) { 23 | const { i18n: i18nFromContext, defaultNS: defaultNSFromContext } = useContext(I18nContext) || {}; 24 | const i18n = i18nFromProps || i18nFromContext || getI18n(); 25 | 26 | const t = tFromProps || i18n?.t.bind(i18n); 27 | 28 | return TransWithoutContext({ 29 | children, 30 | count, 31 | parent, 32 | i18nKey, 33 | context, 34 | tOptions, 35 | values, 36 | defaults, 37 | components, 38 | // prepare having a namespace 39 | ns: ns || t?.ns || defaultNSFromContext || i18n?.options?.defaultNS, 40 | i18n, 41 | t: tFromProps, 42 | shouldUnescape, 43 | ...additionalProps, 44 | }); 45 | } 46 | -------------------------------------------------------------------------------- /src/Translation.js: -------------------------------------------------------------------------------- 1 | import { useTranslation } from './useTranslation.js'; 2 | 3 | export const Translation = ({ ns, children, ...options }) => { 4 | const [t, i18n, ready] = useTranslation(ns, options); 5 | 6 | return children( 7 | t, 8 | { 9 | i18n, 10 | lng: i18n.language, 11 | }, 12 | ready, 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /src/defaults.js: -------------------------------------------------------------------------------- 1 | import { unescape } from './unescape.js'; 2 | 3 | let defaultOptions = { 4 | bindI18n: 'languageChanged', 5 | bindI18nStore: '', 6 | // nsMode: 'fallback' // loop through all namespaces given to hook, HOC, render prop for key lookup 7 | transEmptyNodeValue: '', 8 | transSupportBasicHtmlNodes: true, 9 | transWrapTextNodes: '', 10 | transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'], 11 | // hashTransKey: key => key // calculate a key for Trans component based on defaultValue 12 | useSuspense: true, 13 | unescape, 14 | }; 15 | 16 | export const setDefaults = (options = {}) => { 17 | defaultOptions = { ...defaultOptions, ...options }; 18 | }; 19 | 20 | export const getDefaults = () => defaultOptions; 21 | -------------------------------------------------------------------------------- /src/i18nInstance.js: -------------------------------------------------------------------------------- 1 | let i18nInstance; 2 | 3 | export const setI18n = (instance) => { 4 | i18nInstance = instance; 5 | }; 6 | 7 | export const getI18n = () => i18nInstance; 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { Trans } from './Trans.js'; 2 | export { Trans as TransWithoutContext } from './TransWithoutContext.js'; 3 | export { useTranslation } from './useTranslation.js'; 4 | export { withTranslation } from './withTranslation.js'; 5 | export { Translation } from './Translation.js'; 6 | export { I18nextProvider } from './I18nextProvider.js'; 7 | export { withSSR } from './withSSR.js'; 8 | export { useSSR } from './useSSR.js'; 9 | export { initReactI18next } from './initReactI18next.js'; 10 | export { setDefaults, getDefaults } from './defaults.js'; 11 | export { setI18n, getI18n } from './i18nInstance.js'; 12 | 13 | export { I18nContext, composeInitialProps, getInitialProps } from './context.js'; 14 | 15 | // dummy functions for icu.macro support 16 | 17 | export const date = () => ''; 18 | export const time = () => ''; 19 | export const number = () => ''; 20 | export const select = () => ''; 21 | export const plural = () => ''; 22 | export const selectOrdinal = () => ''; 23 | -------------------------------------------------------------------------------- /src/initReactI18next.js: -------------------------------------------------------------------------------- 1 | import { setDefaults } from './defaults.js'; 2 | import { setI18n } from './i18nInstance.js'; 3 | 4 | export const initReactI18next = { 5 | type: '3rdParty', 6 | 7 | init(instance) { 8 | setDefaults(instance.options.react); 9 | setI18n(instance); 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /src/unescape.js: -------------------------------------------------------------------------------- 1 | // unescape common html entities 2 | 3 | const matchHtmlEntity = 4 | /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230|#x2F|#47);/g; 5 | 6 | const htmlEntities = { 7 | '&': '&', 8 | '&': '&', 9 | '<': '<', 10 | '<': '<', 11 | '>': '>', 12 | '>': '>', 13 | ''': "'", 14 | ''': "'", 15 | '"': '"', 16 | '"': '"', 17 | ' ': ' ', 18 | ' ': ' ', 19 | '©': '©', 20 | '©': '©', 21 | '®': '®', 22 | '®': '®', 23 | '…': '…', 24 | '…': '…', 25 | '/': '/', 26 | '/': '/', 27 | }; 28 | 29 | const unescapeHtmlEntity = (m) => htmlEntities[m]; 30 | 31 | export const unescape = (text) => text.replace(matchHtmlEntity, unescapeHtmlEntity); 32 | -------------------------------------------------------------------------------- /src/useSSR.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { getI18n, I18nContext } from './context.js'; 3 | 4 | export const useSSR = (initialI18nStore, initialLanguage, props = {}) => { 5 | const { i18n: i18nFromProps } = props; 6 | const { i18n: i18nFromContext } = useContext(I18nContext) || {}; 7 | const i18n = i18nFromProps || i18nFromContext || getI18n(); 8 | 9 | // opt out if is a cloned instance, eg. created by i18next-http-middleware on request 10 | // -> do not set initial stuff on server side 11 | if (i18n.options?.isClone) return; 12 | 13 | // nextjs / SSR: getting data from next.js or other ssr stack 14 | if (initialI18nStore && !i18n.initializedStoreOnce) { 15 | i18n.services.resourceStore.data = initialI18nStore; 16 | 17 | // add namespaces to the config - so a languageChange call loads all namespaces needed 18 | i18n.options.ns = Object.values(initialI18nStore).reduce((mem, lngResources) => { 19 | Object.keys(lngResources).forEach((ns) => { 20 | if (mem.indexOf(ns) < 0) mem.push(ns); 21 | }); 22 | return mem; 23 | }, i18n.options.ns); 24 | 25 | i18n.initializedStoreOnce = true; 26 | i18n.isInitialized = true; 27 | } 28 | 29 | if (initialLanguage && !i18n.initializedLanguageOnce) { 30 | i18n.changeLanguage(initialLanguage); 31 | i18n.initializedLanguageOnce = true; 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /src/withSSR.js: -------------------------------------------------------------------------------- 1 | import { createElement } from 'react'; 2 | import { useSSR } from './useSSR.js'; 3 | import { composeInitialProps } from './context.js'; 4 | import { getDisplayName } from './utils.js'; 5 | 6 | export const withSSR = () => 7 | function Extend(WrappedComponent) { 8 | function I18nextWithSSR({ initialI18nStore, initialLanguage, ...rest }) { 9 | useSSR(initialI18nStore, initialLanguage); 10 | 11 | return createElement(WrappedComponent, { 12 | ...rest, 13 | }); 14 | } 15 | 16 | I18nextWithSSR.getInitialProps = composeInitialProps(WrappedComponent); 17 | I18nextWithSSR.displayName = `withI18nextSSR(${getDisplayName(WrappedComponent)})`; 18 | I18nextWithSSR.WrappedComponent = WrappedComponent; 19 | 20 | return I18nextWithSSR; 21 | }; 22 | -------------------------------------------------------------------------------- /src/withTranslation.js: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef as forwardRefReact } from 'react'; 2 | import { useTranslation } from './useTranslation.js'; 3 | import { getDisplayName } from './utils.js'; 4 | 5 | export const withTranslation = (ns, options = {}) => 6 | function Extend(WrappedComponent) { 7 | function I18nextWithTranslation({ forwardedRef, ...rest }) { 8 | const [t, i18n, ready] = useTranslation(ns, { ...rest, keyPrefix: options.keyPrefix }); 9 | 10 | const passDownProps = { 11 | ...rest, 12 | t, 13 | i18n, 14 | tReady: ready, 15 | }; 16 | if (options.withRef && forwardedRef) { 17 | passDownProps.ref = forwardedRef; 18 | } else if (!options.withRef && forwardedRef) { 19 | passDownProps.forwardedRef = forwardedRef; 20 | } 21 | return createElement(WrappedComponent, passDownProps); 22 | } 23 | 24 | I18nextWithTranslation.displayName = `withI18nextTranslation(${getDisplayName( 25 | WrappedComponent, 26 | )})`; 27 | 28 | I18nextWithTranslation.WrappedComponent = WrappedComponent; 29 | 30 | const forwardRef = (props, ref) => 31 | // eslint-disable-next-line prefer-object-spread 32 | createElement(I18nextWithTranslation, Object.assign({}, props, { forwardedRef: ref })); 33 | 34 | return options.withRef ? forwardRefReact(forwardRef) : I18nextWithTranslation; 35 | }; 36 | -------------------------------------------------------------------------------- /test/Translation.spec.jsx: -------------------------------------------------------------------------------- 1 | import { describe, it, vitest, expect, afterEach } from 'vitest'; 2 | import React from 'react'; 3 | import { render, cleanup } from '@testing-library/react'; 4 | import './i18n'; 5 | import { Translation } from '../src/Translation'; 6 | 7 | vitest.unmock('../src/Translation'); 8 | 9 | describe('Translation', () => { 10 | afterEach(() => { 11 | cleanup(); 12 | }); 13 | 14 | function TestComponent() { 15 | return {(t) =>
{t('key1')}
}; 16 | } 17 | 18 | it('should render correct content', () => { 19 | const { container } = render(); 20 | expect(container.firstChild).toMatchInlineSnapshot(` 21 |
22 | test 23 |
24 | `); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /test/backendLngAwareMock.js: -------------------------------------------------------------------------------- 1 | export class BackendLngAwareMock { 2 | constructor(services, options = {}) { 3 | this.init(services, options); 4 | this.type = 'backend'; 5 | this.queue = []; 6 | } 7 | 8 | init(services, options) { 9 | this.services = services; 10 | this.options = options; 11 | } 12 | 13 | read(language, namespace, callback) { 14 | this.queue.push({ language, namespace, callback }); 15 | } 16 | 17 | flush(what) { 18 | let q = [...this.queue]; 19 | if (what) { 20 | const filterFor = []; 21 | if (what.language) filterFor.push('language'); 22 | if (what.namespace) filterFor.push('namespace'); 23 | if (filterFor.length > 0) { 24 | q = q.filter((item) => { 25 | const allOk = filterFor.map((ff) => item[ff] === what[ff]).every((r) => r); 26 | if (allOk) return true; 27 | return false; 28 | }); 29 | } 30 | } 31 | 32 | q.forEach((item) => { 33 | this.queue.splice(this.queue.indexOf(item), 1); 34 | 35 | item.callback(null, { 36 | key1: `${item.language}/${item.namespace} for key1`, 37 | }); 38 | }); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /test/backendMock.js: -------------------------------------------------------------------------------- 1 | export class BackendMock { 2 | constructor(services, options = {}) { 3 | this.init(services, options); 4 | this.type = 'backend'; 5 | this.queue = []; 6 | } 7 | 8 | init(services, options) { 9 | this.services = services; 10 | this.options = options; 11 | } 12 | 13 | read(language, namespace, callback) { 14 | this.queue.push(callback); 15 | } 16 | 17 | flush() { 18 | this.queue.forEach((cb) => { 19 | cb(null, { 20 | key1: 'test', 21 | interpolateKey: 'add {{insert}} {{up, uppercase}}', 22 | }); 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | -------------------------------------------------------------------------------- /test/typescript/custom-types/i18next.d.ts: -------------------------------------------------------------------------------- 1 | import 'i18next'; 2 | 3 | declare module 'i18next' { 4 | interface CustomTypeOptions { 5 | defaultNS: 'custom'; 6 | allowObjectInHTMLChildren: true; 7 | resources: { 8 | custom: { 9 | foo: 'foo'; 10 | bar: 'bar'; 11 | 12 | some: 'some'; 13 | some_me: 'some context'; 14 | }; 15 | 16 | alternate: { 17 | baz: 'baz'; 18 | foobar: { 19 | barfoo: 'barfoo'; 20 | deep: { 21 | deeper: { 22 | deeeeeper: 'foobar'; 23 | }; 24 | }; 25 | }; 26 | }; 27 | 28 | plurals: { 29 | foo_zero: 'foo'; 30 | foo_one: 'foo'; 31 | foo_two: 'foo'; 32 | foo_many: 'foo'; 33 | foo_other: 'foo'; 34 | }; 35 | 36 | context: { 37 | dessert_cake: 'a nice cake'; 38 | dessert_muffin_one: 'a nice muffin'; 39 | dessert_muffin_other: '{{count}} nice muffins'; 40 | 41 | beverage: 'beverage'; 42 | beverage_beer: 'beer'; 43 | }; 44 | }; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/typescript/custom-types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["./**/*"], 4 | "exclude": [] 5 | } 6 | -------------------------------------------------------------------------------- /test/typescript/misc/I18nextProvider.test.tsx: -------------------------------------------------------------------------------- 1 | import { describe, expectTypeOf } from 'vitest'; 2 | import i18next from 'i18next'; 3 | import { I18nextProvider } from 'react-i18next'; 4 | 5 | describe('', () => { 6 | it('basic usage', () => { 7 | expectTypeOf(I18nextProvider).toBeCallableWith({ 8 | i18n: i18next, 9 | children: 'Foo', 10 | }); 11 | }); 12 | 13 | it('should accept `defaultNS`', () => { 14 | expectTypeOf(I18nextProvider).toBeCallableWith({ 15 | i18n: i18next, 16 | defaultNS: 'defaultNS', 17 | children: 'Foo', 18 | }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /test/typescript/misc/context.test.tsx: -------------------------------------------------------------------------------- 1 | import { it, expectTypeOf } from 'vitest'; 2 | import { useContext } from 'react'; 3 | import { i18n } from 'i18next'; 4 | import { I18nContext } from 'react-i18next'; 5 | 6 | it('context', () => { 7 | expectTypeOf(useContext(I18nContext)).toHaveProperty('i18n').toEqualTypeOf(); 8 | }); 9 | -------------------------------------------------------------------------------- /test/typescript/misc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "include": ["./**/*"], 4 | "exclude": [] 5 | } 6 | -------------------------------------------------------------------------------- /test/typescript/misc/tsconfig.nonEsModuleInterop.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | // typescript defaults to these 5 | "esModuleInterop": false, 6 | "allowSyntheticDefaultImports": false 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /test/typescript/misc/useSSR.test.tsx: -------------------------------------------------------------------------------- 1 | import { it, expectTypeOf } from 'vitest'; 2 | import { useSSR } from 'react-i18next'; 3 | import { Resource } from 'i18next'; 4 | 5 | it('useSSR', () => { 6 | expectTypeOf(useSSR).parameter(0).toEqualTypeOf(); 7 | expectTypeOf(useSSR).parameter(1).toEqualTypeOf(); 8 | 9 | expectTypeOf(useSSR).returns.toBeVoid(); 10 | }); 11 | -------------------------------------------------------------------------------- /test/unescape.spec.js: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | import { unescape } from '../src/unescape'; 3 | 4 | describe('unescape', () => { 5 | /** @type {[string, string]} */ 6 | const testCases = [ 7 | ['&', '&'], 8 | ['&', '&'], 9 | ['<', '<'], 10 | ['<', '<'], 11 | ['>', '>'], 12 | ['>', '>'], 13 | [''', "'"], 14 | [''', "'"], 15 | ['"', '"'], 16 | ['"', '"'], 17 | [' ', ' '], 18 | [' ', ' '], 19 | ['©', '©'], 20 | ['©', '©'], 21 | ['®', '®'], 22 | ['®', '®'], 23 | ['…', '…'], 24 | ['…', '…'], 25 | ['/', '/'], 26 | ['/', '/'], 27 | ]; 28 | 29 | testCases.forEach(([value, expected]) => { 30 | it(`should unescape "${value}" to "${expected}"`, () => { 31 | expect(unescape(value)).toStrictEqual(expected); 32 | }); 33 | }); 34 | 35 | it('should unescape long strings', () => { 36 | expect(unescape(testCases.map((test) => test[0]).join(' '))).toStrictEqual( 37 | testCases.map((test) => test[1]).join(' '), 38 | ); 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /test/useSSR.spec.js: -------------------------------------------------------------------------------- 1 | import { describe, it, vitest, beforeAll, afterAll, expect } from 'vitest'; 2 | import { renderHook } from '@testing-library/react'; 3 | import i18n from './i18n'; 4 | import { setI18n } from '../src/context'; 5 | import { useSSR } from '../src/useSSR'; 6 | 7 | vitest.unmock('../src/useSSR'); 8 | 9 | describe('useSSR', () => { 10 | const mockI18n = { 11 | language: 'en', 12 | languages: ['en'], 13 | options: { 14 | ns: [], 15 | defaultNS: 'defaultNS', 16 | nsMode: 'fallback', 17 | }, 18 | services: { 19 | resourceStore: { 20 | data: {}, 21 | }, 22 | backendConnector: {}, 23 | }, 24 | isInitialized: true, 25 | changeLanguage: (lng) => { 26 | mockI18n.language = lng; 27 | }, 28 | getFixedT: () => (message) => message, 29 | hasResourceBundle: (lng, ns) => ns === 'alreadyLoadedNS', 30 | loadNamespaces: () => {}, 31 | }; 32 | 33 | beforeAll(() => { 34 | setI18n(mockI18n); 35 | }); 36 | 37 | afterAll(() => { 38 | setI18n(i18n); 39 | }); 40 | 41 | it('should set values', () => { 42 | renderHook(() => useSSR({ foo: 'bar' }, 'de')); 43 | expect(mockI18n.language).toBe('de'); 44 | expect(mockI18n.services.resourceStore.data).toEqual({ foo: 'bar' }); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /test/useTranslation.usedNamespaces.spec.js: -------------------------------------------------------------------------------- 1 | import { describe, it, vitest, expect, afterEach } from 'vitest'; 2 | import { renderHook, cleanup } from '@testing-library/react'; 3 | import { useTranslation } from '../src/useTranslation'; 4 | 5 | vitest.unmock('../src/useTranslation'); 6 | 7 | describe('useTranslation', () => { 8 | afterEach(() => { 9 | cleanup(); 10 | }); 11 | 12 | it('should render correct content if ready (having all ns)', () => { 13 | const i18n = { 14 | language: 'en', 15 | languages: ['en'], 16 | services: { 17 | resourceStore: { 18 | data: {}, 19 | }, 20 | backendConnector: { backend: {} }, 21 | }, 22 | isInitialized: true, 23 | changeLanguage: () => {}, 24 | getFixedT: () => (message) => message, 25 | hasLoadedNamespace: () => false, 26 | hasResourceBundle: (lng, ns) => ns === 'ns1' || ns === 'ns2' || ns === 'ns3', 27 | loadNamespaces: () => {}, 28 | on: () => {}, 29 | off: () => {}, 30 | options: {}, 31 | }; 32 | renderHook(() => useTranslation(['ns1', 'ns2', 'ns3'], { i18n })); 33 | 34 | expect(i18n.reportNamespaces.getUsedNamespaces()).toEqual(['ns1', 'ns2', 'ns3']); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /test/utils.spec.js: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | import { isString, isObject } from '../src/utils.js'; 3 | 4 | describe('isString', () => { 5 | it('should return true for strings', () => { 6 | expect(isString('string')).toBe(true); 7 | }); 8 | 9 | it.each([[undefined], [null], [1], [{}], [[]], [() => {}]])( 10 | 'should return false for non-strings, testing %o', 11 | (value) => { 12 | expect(isString(value)).toBe(false); 13 | }, 14 | ); 15 | }); 16 | 17 | describe('isObject', () => { 18 | it.each([[{}], [{ key: 'value' }], [[]]])( 19 | 'should return true for objects, testing %o', 20 | (value) => { 21 | expect(isObject(value)).toBe(true); 22 | }, 23 | ); 24 | 25 | it.each([[undefined], [null], [1], ['string'], [() => {}]])( 26 | 'should return false for non-objects, testing %o', 27 | (value) => { 28 | expect(isObject(value)).toBe(false); 29 | }, 30 | ); 31 | }); 32 | -------------------------------------------------------------------------------- /test/withTranslation.keyPrefix.spec.jsx: -------------------------------------------------------------------------------- 1 | import { describe, it, vitest, expect, afterEach } from 'vitest'; 2 | import React from 'react'; 3 | import { render, cleanup } from '@testing-library/react'; 4 | import i18n from './i18n'; 5 | import { withTranslation } from '../src/withTranslation'; 6 | 7 | vitest.unmock('../src/withTranslation'); 8 | 9 | describe('withTranslation', () => { 10 | afterEach(() => { 11 | cleanup(); 12 | }); 13 | 14 | class TestComponentKeyPrefix extends React.Component { 15 | render() { 16 | const { t, i18n: instance } = this.props; 17 | expect(typeof t).toBe('function'); 18 | expect(instance).toBe(i18n); 19 | 20 | return
{t('deepKey1')}
; 21 | } 22 | } 23 | 24 | it('should render correct content', () => { 25 | const HocElement = withTranslation('translation', { keyPrefix: 'deepPath' })( 26 | TestComponentKeyPrefix, 27 | ); 28 | const { container } = render(); 29 | expect(container.firstChild).toMatchInlineSnapshot(` 30 |
31 | value1 32 |
33 | `); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["example/**/*"], 3 | 4 | "compilerOptions": { 5 | "module": "ESNext", 6 | "target": "ES2020", 7 | "lib": ["ES2020", "dom"], 8 | "jsx": "react", 9 | "moduleResolution": "bundler", 10 | "forceConsistentCasingInFileNames": true, 11 | "strict": true, 12 | "noEmit": true, 13 | "baseUrl": ".", 14 | "paths": { "react-i18next": ["./"] }, 15 | "esModuleInterop": true, 16 | "allowSyntheticDefaultImports": true, 17 | "skipLibCheck": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | name: 'runtime', 6 | dir: './test', 7 | exclude: ['**/typescript/**'], 8 | environment: 'happy-dom', 9 | setupFiles: ['./test/setup'], 10 | 11 | coverage: { 12 | reporter: ['text', 'html', 'json', 'lcov'], 13 | include: ['**/src/*.{js,jsx}', '*.macro.js'], 14 | exclude: [ 15 | '**/src/index.js', 16 | '**/src/shallowEqual.js', 17 | '**/node_modules/**', 18 | '**/test/**', 19 | '**/example/**', 20 | ], 21 | }, 22 | }, 23 | }); 24 | --------------------------------------------------------------------------------