Translate static string messages in ReactJs using lingui.js

Question

I am using lingui.js and following https://lingui.js.org/tutorials/react.html. I am able to setup the project and it runs fine also generates the PO file and translation content for content/element that are wrapped around Trans macro <Trans>Send Verification Code</Trans>. However I am not able to find help how do I setup the messaged that we display on button click or placeholders that we set for input element like:

how do I set the translation for string Please select security code preference from below?

handleOnSelect = (event: any) => {
  if (!this.state.selectedOption.value) {
    Toast.error("Please select security code preference");
  }
}

When I tried doing the translation like below it does not extract the string Please select security code preference to PO file

handleOnSelect = (event: any) => {
  if (!this.state.selectedOption.value) {
    Toast.error(i18n._("Please select security code preference"));
  }
}

Also how do I do configure for placeholder from below Element?

<Select
            name="sendTo"
            id="sendTo"
            onChange={this.handleSendToChanged}
            placeholder={`Select`}
            options={this.state.selectOptions}
            value={this.state.selectedOption}
          />

Can you please help me know/configure this part?

score 1 · Answer 1 · answered Dec 10 '22 at 17:16

I think I am able to figure this out, adding the solution here so that it can help others.

I did import the t macro from @lingui/macro like below

import { t } from "@lingui/macro";

Then I started using like below

        <Select
            name="sendTo"
            id="sendTo"
            onChange={this.handleSendToChanged}
            placeholder={t({
              id: `msg.Select`,
              message: "Select",
            })}
            options={this.state.selectOptions}
            value={this.state.selectedOption}
          />

And for messages like below

Toast.error(
    t({
      id: `msg.Please select security code preference`,
      message: "Please select security code preference",
    })
  );

May be not the best way to do this, but till the time I find best way using it to make my life easier

score 1 · Answer 2 · answered Mar 12 '23 at 14:18

One suggestion, just avoid manual id as much as possible. It's not scalable and you have "naming things" problem multiplied to the amount of messages you have.

Just leave that part to the library, it will handle everything for you.

handleOnSelect = (event: any) => {
  if (!this.state.selectedOption.value) {
    Toast.error(t`Please select security code preference`);
  }
}

<Select
            name="sendTo"
            id="sendTo"
            onChange={this.handleSendToChanged}
            placeholder={t`Select`}
            options={this.state.selectOptions}
            value={this.state.selectedOption}
          />

Translate static string messages in ReactJs using lingui.js

2 Answers2