Internationalization

Graphic Walker includes built-in translations and supports custom language resources.

Built-in Languages

Language Code	Language
`en-US`	English (default)
`zh-CN`	Chinese (Simplified)
`ja-JP`	Japanese

Setting the Language

Use the i18nLang prop:

<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="ja-JP"
/>

Custom Translations

Provide your own translations using the i18nResources prop. The resource object is keyed by language code, with nested translation keys:

const customTranslations = {
  'fr-FR': {
    'main.tabpanel.DataSource': 'Source de données',
    'main.tabpanel.DataSource.btn': 'Ouvrir la source de données',
    'main.tabpanel.settings': 'Paramètres',
    // ... more keys
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="fr-FR"
  i18nResources={customTranslations}
/>

Overriding Built-in Translations

You can override specific keys in an existing language without replacing the entire translation:

const overrides = {
  'en-US': {
    'main.tabpanel.DataSource': 'Data Input',
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="en-US"
  i18nResources={overrides}
/>

Finding Translation Keys

Translation keys follow a dot-notation hierarchy. The full set of keys is available in the Graphic Walker source code (opens in a new tab). Check the en-US.json file for the complete list of translatable strings.

Example: Multi-Language App

import { useState } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
 
const LANGUAGES = [
  { code: 'en-US', label: 'English' },
  { code: 'zh-CN', label: '中文' },
  { code: 'ja-JP', label: '日本語' },
];
 
function App() {
  const [lang, setLang] = useState('en-US');
 
  return (
    <div>
      <select value={lang} onChange={e => setLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.label}</option>
        ))}
      </select>
 
      <GraphicWalker
        data={data}
        fields={fields}
        i18nLang={lang}
      />
    </div>
  );
}