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?

  • I am thinking of writing a preprocess function and passing the translated values using props. But this seems really complicated and not a good solution. Jan 19, 2018 at 7:21
  • Any other solution that solves this problem in other ways is also good. Jan 19, 2018 at 11:05

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.