How to make React app that support multilanguage? - reactjs

I have reacted app and there are many components, and I want that the text will support multiple languages,
I mean if the user wants English then all content of the component translates into English.
I try to add multilanguage in my react app using the i18next library but I found that I need to write all text in every language and store somewhere then use that.
But I want it when the user selects language and then it translates into the desired language without hard code.
like when we write anything in google translator then it translates all the page with the desired language.

If you want the content of your site to be machine translated on the go, then some browsers (if not all of them) have this built-in functions. Just right click and "translate" the page. So maybe you should just mention about this function somewhere on the page?)
But if you want the content of your site to be professionally translated, then you've got to store it in the db. And depending on the global language state (which could be managed with redux), the content in selected language will be rendered.

Live translation on your website is not a good idea.
Alternatively, checkout translate.i18next.com
like google translate but for i18next.

Related

How should I approach combining react-i18next with content which is fetched from database?

I have a React application and I want to make it a multi-language webpage (English and Bulgarian). So far I've got the hang of translating the static content, such as header, footer, navigation buttons, homepage components, etc. But let's say that I have a list of posts in both languages that gets fetched from my database and I would like to display them according to the language that the user has selected. What would be the most reasonable approach in this situation? My initial guess was to check for the currently selected language and fetch the posts that correspond to that language. Is there a better way to do achieve this?
With your use case, having a bigger amount of text, I think it is the best if you use the currently used language, i.e. i18next.resolvedLanguage and fetches the appropriate blog post.

React Native Multi-Transtation

In my project I need to let the user select a desired language and thus change all the text in the project to the language he requested.
I would love to know if there is a library in React Native recommended that does the job.
There are a lot of similar libraries, called i18n~ etc, i can suggest react-i18next it's very simple in configuration and usage, especially with useTranslation hook and they have a good react-native example here. You obviously need to add translation files to you project with language translations that you will support. You can use this with some libraries that allow you to save data to persistent-store, as AsyncStorage or EncryptedStorage in order to save user language preferences globally to the whole app.

Show posts for default language if switched to language that has no posts added yet

I have a site that uses Polylang plugin for languages. I have two languages, one default and another. All posts currently are added using default language, but when I switch to another language, nothing has been showing up. I would like in this case show content from default language instead and use another language when it will be added. Is it possible to make this happen?
No, it is not possible to fallback to the default language using the Wordpress Polylang plugin. From https://wordpress.org/support/topic/fallback-to-default-language/ :
This is not possible. There is no feature like this.
The only way to do this is to “translate” the post and page but to add the default language content instead of the translated content. So technically the post and page is “translated” but the content is still the same.
However, there seems to be a Wordpress plugin that does offer this functionality. The project is not very active, however. Perhaps you could pick up a clue on how to approach this problem from its source code.

Locale and dynamic multi language support in EXJS 6

According to docs, the app.json only allows to define one locale.
locale: "fr"
What happens if I have a multiple language application and I want users to select dynamically their language?
How can I include more than one locale ?
And then, how can I dynamically load the locale with just changing an Ext variable ? Something like:
Ext.setLocale("es");
ExtJs is not able to do this natively.
In my application I have solved this by defining a language class that works similar to gettext.
This allows me to have the code base in the default language with every string wrapped in the function Lang._('My text'). The translation is then done independently of ExtJs (In my case the translation interface is written in ExtJs, but the translation itself is independent).
I still cannot change the language dynamically. For this, I need to rerender the application in the browser. In my case, the translations are compiled into app.js, and therefore there is no need to reload app.js from the server.
I have only two languages, so this approach is OK. If you need to support many language, the best way is to load the translation string before rendering the application. To switch the language, you need then to load the translation and rerender the UI.
There is a good article about this on Saki's ExtJs site.

Translate Front-End Site Interface in Drupal 7

I am working on a multi-lingual website in Drupal 7. I installed the i18n module to translate the content on the website. However, I also have other site interface elements on the front-end part of the website like button texts, navigation links, etc that I would like to translate.
Is it really necessary to develop different themes per language? Or is there a more elegant solution to do this?
Thanks!
"Is it really necessary to develop different themes per language?"
No, it isn't. Every visual text can be translated, via the Translate interface-entry in the admin menu. If you write your own modules, templates and stuff, use the t-function to make the terms available in Translate interface or write your own po-files.
There is one issue of course: if the length of the terms in language A is too different to language B you can get in trouble with your layout. So test everything in depth and load different css styles if necessary.

Resources