Internationalization

Default displaed text is in English if left un-translated

How to Enable i18n in neo4j-arc

Intalling i18next and react-i18next with auto language detector

yarn add react-i18next i18next i18next-browser-languagedetector

If we choose to have fixed locale, we can opt-out i18next-browser-languagedetector

Load Translations

Add on i18next Init

We can add the translations on init by create a new file i18n.ts beside our App.tsx containing following content:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import { resources } from 'neo4j-arc/graph-visualization'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    interpolation: {
      escapeValue: false
    }
  })

export default i18n

The file does not need to be named i18n.ts, it can be any other filename. Just make sure it is imported accordingly.
Those interested in the details above can refer to the react-i18next documentation
The example above uses LanguageDetector plugin which detects user language in the broser automatically. If we have decided not to install i18next-browser-languagedetector then we do not need to import and use LanguageDetector.

Add after Init

We can also add the translations after init:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {},
    interpolation: {
      escapeValue: false
    }
  })

export default i18n

Note that we have passed in an empty resources object on init. This is necessary because otherwise i18next will try to load translations and give us a warning that we are not using a backend.

Then we would include the following logic anywhere we would like to load translations in

import i18next from 'i18next';

i18next.addResources("en", "translation", resources.en.translation);
i18next.addResources("zh", "translation", resources.zh.translation);

I18nextProvider

import { I18nextProvider } from 'react-i18next'

import i18n from './i18n'

const App = (): JSX.Element => {
  return (
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  )
}
export default AppInit

Troubleshooting

Switching Browser Lanauage Does Not Alter the Displayed Language in Neo4j Browser

Please make sure the i18n is either

set up with fixed language, for example

The initialization assumes provider pattern around regular App component:

i18n
  .use(initReactI18next)
  .init({
    ...
    lng: 'zh'
  })

or, if auto language detection is enabled, try clearing browser cookie and try again.