@scaleflex/i18n-it

@scaleflex/i18n-it

Backend plugin to load data via i18n.it service for i18next

Install

npm i @scaleflex/i18n-it --save

usage

i18n.client.js

import i18n from 'i18next';
import Backend from '@scaleflex/i18n-it';

const newInstance = i18n.createInstance();  // create new instance (helpful if you have nested i18nProviders)

newInstance
  .use(Backend)
  .init({
    fallbackLng: false,
    lng: 'en',                  // initial language
    ns: ['translations'],
    defaultNS: 'translations',
    debug: false,
    load: 'languageOnly',
    keySeparator: false,
    nsSeparator: false,
    saveMissing: true,
    react: {
      wait: true
    },
    backend: {
      uuid: 'xxx'                // your grid key in i18n.it service
    }
  });


export default newInstance;

in your index.js

...
// import I18nextProvider from react-i18next and i18n from i18n.client.js
import { I18nextProvider } from 'react-i18next';
import i18n from './i18nIt/i18n.client'


ReactDOM.render(
  <I18nextProvider i18n={i18n}>  // wrap your app with I18nextProvider and pass i18n module
    <Suspense fallback="loading">
      <App/>
    </Suspense>
  </I18nextProvider>,
  document.getElementById('root')
);

! make sure you use the correct language formats everywhere in your app. Different formats like “fr” / “fr-FR” / “fr-fr” will cause to extra API call.

check the documentation for i18next

Contributing!

All contributions are super welcome!

License

@scaleflex/i18n-it is provided under the MIT License