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.
Related
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.
I have a (very) small working portfolio site built using React that highlights various simple web development applications. Currently, this entire React app is technically only just one page, but I'd like to eventually expand this site to reflect my additional work as a graphic designer.
I want visitors to be able to choose whether to view my design work or my coding work. I know that this can be done by essentially creating a second copy of each component, but is there any way to basically use the same existing components in my application and just feed "design" versus "web" data through them based on which work visitors are interested in? Could "design" and "web" data would be somehow held in a global state (useContext)? I understand that this description is vague, perhaps intentionally; I just need a push in the right direction for how to keep building out my little site.
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.
We are trying to revamp the company website, and we have some discussion on choosing the technologies. React is one of our options.
However, the website is basically some static contents, which is hardcoded html pages with many different layouts. The contents are static and will never or seldom update. So our idea is to hard code every content into react, there is no API call to get extra contents for most of the cases (except few pages which will load the price table and news from our CMS).
I want to ask react experts for such scenario is it good to use react? Is it a common practice?
I would highly recommend against using React for your situation because there would be no difference at all.
React, and SPA's(Single Page Applications) in general, excel in scenario's where a page might constantly need to be refreshed because of new or changing data. Since you said your content is static with no changes or API calls, this is the opposite of React's intended use.
I recommend sticking with the technologies you're currently using. If you want to revamp the website i would say to focus more on the design and it look more modern through CSS and maybe some jQuery.
Sorry if you find this question silly or off-topic but I have the following issue. I am experimenting with ReactJS and trying to write simple blog-like Single Page Application.
I want users to write posts on my blog with rich features for text decoration. So I am going to allow them to use some html tags. The problem is: what is the best way to render users' input data?
I simply can get their html input, escape dangerous html tags (like script etc.), and then just use dangerouslySetInnerHTML to render raw html. Is it a good approach? Are there some ReactJS specific features to solve my problem?
Thanks!
No, if you can, avoid dangerouslySetInnerHtml. This is also stated in the offical react documents:
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
One possible approach would be to define a specific input format as #canaan seaton stated.
My idea would be to use a component like draftjs to render rich text content and to give the editors the ability to see what they get (wysiwyg). Draftjs is really easy to understand and there are plenty resources and additional packages (like syntax highlighting, ...) out there.
Off course you can also use any other rich text editing component.