Namespaced i18next localization in react with no tears
npm install ns-react-i18nextsh
npm install ns-react-i18next
`Add global provider to the root of your app
`jsx
import * as i18n from 'i18next';
import { I18NextProvider } from 'ns-react-i18next'i18n
.use(LanguageDetector)
.init({
resources: translations,
fallbackLng: 'en',
debug: true,
defaultNS: 'common', // this namespace will be used if no namespace shared via context
fallbackNS: 'common',
});
ReactDom.render(
,
document.getElementById('root')
)
`$3
Use another provider to share namespace between components sub-tree. Any component under this provider will render translated string of shared namespace + children string. Note that when the language will be changed (with a help of i18n.changeLanguage()) - every translate will rerender by itself.`jsx
import { Translate, NamespaceProvider } from 'ns-react-i18next'
// specificNs:some_complex_structure
some_complex_structure
something_specific
// specificNs:something_specific
`Even possible to share namespace for several routes.
`jsx
`There any
Translate` of CustomersList, ManageCustomer and thiers sub-components and sub-routes of take the 'customers' namespace.