Search code examples
javascriptreactjswordpressgoogle-translategoogle-translation-api

How to manage translating a complex React app


I am working on a relatively complex React project. It's integrated with WordPress and includes some static pages, as well as blog and product pages for e-commerce. I have been trying to add the ability for the user the choose the site language, i.e. English or Spanish. I have tried working with a package called react-auto-translate - for some reason, it doesn't work on all of the components with text, so that is probably not a viable option. I've also been trying out the GTranslate plugin for wordPress, which provides a language url, so if the user selects Spanish the JSON url changes to /es/wp-json, making all of the JSON data translated to Spanish. This would seem like the best option, except that it only takes care of the text coming from the JSON data, not the hardcoded text in the React app.

I have also attempted to use the Google Translate API directly, but was not successful in getting it to connect to my app.

Is anyone aware of any other solutions for handling translations in WordPress + React applications?


Solution

  • You can try this alternatives:

    https://react.i18next.com/

    Airbnb's Polyglot: https://airbnb.io/polyglot.js/

    But take into consideration that none of this will work automagically, you may need to make changes to your project. Choosing an internationalization/localization solution may be one of the things you decided when designing your app.