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.
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'm learning React. My goal is to create a few components that render cross-platform. Specifically, I'd to create components with the option to a) render in the browser b) render on the server c) render natively on Windows and d) render natively in iOS. Based on my limited understanding, it seems like each of these cases are possible. I'm trying to understand the simplest way to do this though. It almost seems like each scenario requires a different approach, which almost results in four different components. This seems like a misunderstanding on my part though.
If I wanted to render a button in the four scenarios above, what is the simplest approach? I figured a tutorial showing this would exist, but I haven't found one.
Thank you
First of all, try to use packages that support all of your environments. But if you need separate implementation then you should do it like this
Button example you mentioned:
create a button folder
create a Button.js or index.js file
create Button.[enviroment].js files you need and export only one Button component in the root Button.js file. like this:
-- /components
-- /button
-- `index.js`
-- `Button.web.js`
-- `Button.android.js`
-- `Button.windows.js`
// Button.web.js
export const Button = ({title}) => {
// web specific implementation
}
// Button.windows.js
export const Button = ({title}) => {
// windows specific implementation
}
// index.js
export {Button} from './Button'
What I know from React is that React components are different from React Native ones. you can't have a single component to be used both in React and React Native and you should create separate projects for each one. but in React Native you code once and you can run it on both android and IOS and as they introduced recently no windows and mac too (1).
So to wrap things up, you should separate your web application from your native applications (which can be android, IOS, windows, and mac) but since React and React Native are not that different from each other, it won't be as hard as starting a new project.
Your react native code works in both Android and Ios(unless you use some libraries which are platform specific) . To run your react native code in web, use react-native-web. For windows and macOS use this.
Best part with all this is, you write the code only once but run it everywhere.
Interesting - I thought I'd post some related thoughts based on my own efforts on unified UIs. It may not answer your question directly, but I hope it is of interest.
REACT AND APPROACH
I would argue that you should use the right tool for the job. React is a great choice for Single Page Apps, and also surprisingly good for Desktop Apps:
An SPA will run in all desktop and mobile browsers on any OS
A desktop app will run on Windows, MacOS and Linux
MOBILE
I work a lot with security tech, which requires up to date native support. In these cases Swift and Kotlin shine, and technologies such as React Native become hard work, because you are always going through extra layers, with many annoyances.
CODE EXAMPLES
My ongoing struggles with cross platform UI technologies are here, and they include a React SPA and React desktop app, both of which deal with difficult OpenID Connect security flows.
UI code is the same in all cases, including mobile, but I avoid React for mobile apps. Code sharing would be more effort than it is worth. Also, in a real company, mobile and web is often developed by different teams, who should be able to choose their own tech.
SUMMARY
The thing that should be shared is design patterns, not technology or code. Design patterns will scale over time, whereas code sharing will not.
Almost all the references online mention the use of MDX with React.js. Even though other frameworks or libraries support MDX (with help of components), I haven't specifically seen the use of ".mdx" file formats outside of React.
The support of ".mdx" files in Gatsby and Next.js allows us to create a separate folder for the blog posts and have them stored anywhere (CMS, Github etc...) which helps in organizing. And the file extension of ".mdx" itself is pretty straight-forward and self-explanatory even for a beginner to grasp the concept.
So I was just wondering - If I would like to use mdx files, am I limited to React.js? Is it possible to use Svelte, Vue, Angular as well?
Yes you can use mdx outside of React but not everywhere, Check out this guides I hope they help!
mdx for Vue.js: https://mdxjs.com/guides/vue/
mdx for Svelte(MDsveX): https://madewithsvelte.com/mdsvex
MDX as such is specifically for React because it uses JSX to define it's component.
I am sure there are alternatives for other frameworks, as a Svelte user myself I know that at least Svelte has MDSVEX which is basically the same.
Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment
I'm working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.