How to pass Internationalization.json to jsonform component using i18n in react?

General
1

I am getting the below example from i18n documentation.

const translator = (key, defaultMessage) => {
  console.log(`Key: ${key}, Default Message: ${defaultMessage}`);
  return defaultMessage;
};

const [locale, setLocale] = useState<'de'|'en'>('de');
const translation = useMemo(() => translator(locale), [locale]);

<JsonForms
  i18n={{locale: locale, translate: translation}}
  ...
/>

But I am not sure how to pass i18n.json.

schema:
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 3,
      "description": "Please enter your name",
      "i18n": "name"
    },
    "birthDate": {
      "type": "string",
      "format": "date",
      "i18n": "birth"
    },
    "nationality": {
      "type": "string",
      "enum": [
        "DE",
        "IT",
        "JP",
        "US",
        "RU",
        "Other"
      ],
      "i18n": "nationality"
    },
    "occupation": {
      "type": "string",
      "i18n": "occupation"
    },
    "postalCode": {
      "type": "string",
      "maxLength": 5,
      "i18n": "postal-code"
    }
  },
  "required": [
    "occupation",
    "nationality"
  ]
}

UI-schema:
{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/name"
        },
        {
          "type": "Control",
          "scope": "#/properties/birthDate"
        }
      ]
    },
    {
      "type": "Label",
      "text": "Additional Information"
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/nationality"
        },
        {
          "type": "Control",
          "scope": "#/properties/postalCode"
        }
      ]
    }
  ]
}

i18n:
{
"en":{
"name":{
"label":"Name",
"description":"The name of the person"
},
"birth":{
"label":"Birth Date",
"description":""
},
"nationality":{
"label":"Nationalitye",
"description":""
},
"postal-code":{
"label":"Postal Codee"
},
"error":{
"required":"field is requirede"
}
},
"de":{
"name":{
"label":"Name",
"description":"Der Name der Person"
},
"birth":{
"label":"Geburtsdatum",
"description":""
},
"nationality":{
"label":"Nationalität",
"description":"",
"Other":"Andere"
},
"postal-code":{
"label":"Postleitzahl"
},
"error":{
"required":"Pflichtfeld"
},
"Additional Information":"Zusätzliche Informationen"
}
}
2

Hi @SouradeepMldt,

What you need to do is to integrate the content of the i18n.json file you posted into your translator. So depending on your environment you can import your i18n.json file or request it from some backend. Then you create the translator and access the object within it, e.g. via lodash’s get.

For example like this (note that I wrote this from the top of my head and it’s untested).

import myi18nfile from './i18n.json'; // your tool chain must be able to handle json imports
import get from 'lodash/get';

const createTranslator = locale => (key, defaultMessage) => {
  return get(myi18nfile, `${locale}.${key}`, defaultMessage);
}

// [...]

const translator = useMemo(() => createTranslator(locale), [locale]);
1 Like
3

Thank you @sdirix . This works.