How to access i18n strings in ReactJS Component | Community
Skip to main content
R
rakesh4
February 4, 2021
Solved

How to access i18n strings in ReactJS Component

  • February 4, 2021
  • 2 replies
  • 1549 views

Hi Team,

 

We have Non SPA app with multilingual support, now we are in the process of component built using ReactJS.

In HTML file, I am able to use i18n string by using ${'h_search' @ i18n}.

How can I access the same i18n strings in ReactJS Component? 

Please advice.

Thanks,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by raj_mandalapu

Hi Rakesh,

 

You are building a non-SPA project, so you can use the below node modules, the react itself has an i18n module, so you can try it for multilingual. you need to manage all translations in the JSON inside the public folder something like this /public/locales/en/translation.json

 

Why I am proposing this, the translation's will not change very frequently, even if it changes also in AEM you need to get developer help to update and send it as JSON format, I feel instead of writing exporting logic for this in AEM, you can handle directly in react itself.

 

https://react.i18next.com/legacy-v9/step-by-step-guide

2 replies

Anudeep_Garnepudi
Community Advisor
Anudeep_GarnepudiCommunity Advisor
Community Advisor
February 4, 2021

@rakesh4 

i18n(I18n) is a server side object, you will not be able to access it from frontend(ReactJS).  What you can do you get the i18n object in Sling Model and expose it to the frontend as JSON using Sling Model exporter.

AG
    raj_mandalapu
    raj_mandalapuAccepted solution
    Level 7
    February 6, 2021

    Hi Rakesh,

     

    You are building a non-SPA project, so you can use the below node modules, the react itself has an i18n module, so you can try it for multilingual. you need to manage all translations in the JSON inside the public folder something like this /public/locales/en/translation.json

     

    Why I am proposing this, the translation's will not change very frequently, even if it changes also in AEM you need to get developer help to update and send it as JSON format, I feel instead of writing exporting logic for this in AEM, you can handle directly in react itself.

     

    https://react.i18next.com/legacy-v9/step-by-step-guide

      Terms & ConditionsAccessibility statement

      Loading footer...