How do I fetch translated strings?

Question

I have a progressively decoupled Reactjs application running on top of Drupal. Its a multilingual application.

I need to fetch the translated strings from the Drupal itself and handle the translations editor and everything in Drupal itself, rather than maintaining a separate translation system for react.

How is it possible? A simple Drupal.t() doesn't work. I checked.

Any examples I can refer?

Answer 1

Drupal.t() works in this case. Have to to compile the javascript and clear the Drupal cache in order for strings to appear.

For props way:

On get_sample_props():

function getsampleprops() {
  return ['sampleval' => t('Hello World!!!')];
}

On the controller,

$build = [
  '#theme' => 'sample_react',
  '#props' => json_encode($this->get_sample_props()),
];

On the template, I did:

<div data-component="Sample" data-prop-labels='{{props|raw}}'></div>

On the React side, I used

$val = this.props.labels.sampleval;

Volia, its done. Its bit inconvenient, but work gets done.