Localize Dynamic Forms with Lingui

[Ahmed-Elbessfy]

I have a dynamic form generator which accepts JSON object, and then creates a form with its fields. JSON objects consist of separate objects each describing form fields.

I am trying to use Lingui to localize and translate the content of each field, including labels, placeholder, options and error messages.

My main problem is that I can't find a way to translate variables used to represent content.

Here is an example - this is a sample configuration for 2 select fields:

{
    category: "field",
    fieldType: "select",
    name: "Type",
    label: "Type",
},
{
    category: "field",
    fieldType: "select",
     name: "subtype",
    label: "Subtype",
},

And here are my approaches:

<label>{label && <Trans>{label}</Trans>}</label>

//

<label>{label && t(i18n)`${label}`}</label>

Am I missing something or this is not an available feature for the moment?
Is there any workaround for this?

[timofei-iatsenko]

https://lingui.dev/tutorials/react-patterns#lazy-translations

import {msg} from "@lingui/macro";
import {Trans} from "@lingui/react";

const defs = [
{
    category: "field",
    fieldType: "select",
    name: "Type",
    label: msg`Type`,
},
{
    category: "field",
    fieldType: "select",
     name: "subtype",
    label: msg`Subtype`,
},
]

// usage in jsx
<label>{label && <Trans id={label.id}/>}</label>;

[Ahmed-Elbessfy]

Thank you, man. You got me off the hook.

[Ahmed-Elbessfy]

Hi,
Is there a way to pass variable values to "msg" macro?

I have a set of Select Option labels that come from BackEnd. Here is an example:

Response from backend:

{
  {
    label: "reserved",
    value: "RESERVED"
  },
  {
    label: "confirmed",
    value: "CONFIRMED"
  },
  {
    label: "cancelled",
    value: "CANCELED"
  },
}

my trial was :

status.map(
          ({label,value}) => {
            return {
              value,
              label: msg`${label}`,
            };
          }
        );

but it is not working?

[Ahmed-Elbessfy]

But I don't necessarily always know all returned values. Is there a way to add it dynamically? even without using "msg" macro?

[timofei-iatsenko]

So how you are going to extract and translate if you don't know them ahead of time? Or if the labels come already pre-translated from backend, why you need to use any macro for them?

[Ahmed-Elbessfy]

The case is that labels come from the backend as a "string" in plain English. I need to extract it dynamically and then translate it into other languages.

[timofei-iatsenko]

How extract CLI would know what your backend might return? You need to know that ahead of time and write a map as I showed before.

[Ahmed-Elbessfy]

After a lot of trials, I will go with the map although It will be a lot of hard code but it is the only way. Thank you for the help.