A simple front-end internationalization solution based on React- Hook

Preface 💬

implementationReactProject internationalization, we have to mention the more popular libraries in the industry:react-intlIt is Yahoo’s open source language internationalization projectformatjsPart of and through its provided componentsapiCan be found inReactImplement multilingual support in the project.
react-intlThe biggest advantage is that it usespropsWithout reloading the page, you can directly change the displayed language, and its disadvantages mainly have two:
- Can only be applied to the view layerjsxThe contents of the document (i.eReact.Component), not supported in normaljsObject using 😫.
- It is decorated in the form of wrapped componentsReact.Component, so the component behavior changes in many ways and is more intrusive 😱.
Discovered during development, in order to achieve internationalization, usereact-intlThe internationalization steps of the library are tedious and are not the focus of this article (portal 👉 :React -intl Implements react internationalization in multiple languages), and although the library provides many components, most of the time you just need to use them<FormattedMessage/>For this component, there is really no need to buy an entire forest 🤷♀️ for a single 🌲.
Based on the above mentioned problems, this paper will introduce based onReact-hookImplementation of a set of simple front-end internationalization solution (already inReactPut into use in the project, no problems encountered at present).

The usedreact-intlAs you all know, the library provides<IntlProvider/>Component used to provide context for internationalization: when used<IntlProvider/>When a component is wrapped around it, the component itself and the children contained within the component get all of itreact-intlProvides interfaces as well as in<IntlProvider/>The introduction of thelocaleThe content of the configuration file.
In fact, once we have created the internationalized resource files for different language versions, the corresponding language version files can be used as long as the language is determineddictionaryUse the query in the component. The international resource file in English and Chinese looks like this 👇 :

We can useReactTo provide thecreateContextMethod to create aReactContext (Context) is used to store the current language version, and thenContext.ProviderAs the outermost packaging of our components (generally<App/>),<App/>The component itself and its contained children can be used as long as they are functional componentsuseContextMethod to get the current language version, based on the correspondingdictionaryTranslate copy.
As MENTIONED earlier,react-intlLibraries can only be internationalized in components, not in normaljsObject. To solve this problem, we can store the current language version globallycurrentLangWhen switching language versions, the global variable is updated, and the API provided to the JS file only needs to be based on the currentcurrentLangValue Selects the relevant language versiondictionaryAnd pass the incomingkeyCarry out copy translationvalue).

Students who do not understand do not panic, here first introduce the idea of the implementation of the whole scheme, how to achieve the specific, and then look down at 🚶, after looking at the code to look back at the idea, may be more clear.

providegetLangMethod is used to get the current language version (mainly used by JS files) for andsetLangThe following code is used to switch the current language version:

Careful students find it in the code as wellupdaterListThis variable is calledsetLangMethod is iterated in orderupdaterListAnd execute the associated methods. Which will be mentioned below<IntlProvider/>Component will be involved inupdaterListValue modification.

useReactTo provide thecreateContextMethod to create aReactContext (Context) to store the current language version, the code is as follows:

<FormattedMessage/>Component support for incomingid(Mandatory) and parametersargs(Optional), the relevant code is as follows:

from<FormattedMessage/>As you can see from the component’s implementation code, the core code calls customizationhook(i.e.useFormatMessageMethod), which makes use of the stringsplitMethod can use the re to split properties that make the result contain separator blocks (portal 👉 :MDN document) and useuseContextMethod to obtain<IntlProvider/>The language version in which the component is stored.
Use in components:

To enable normal JS objects to use internationalization, we provide two methods for processing without arguments (getRawTextMethod) and with parameters (getFormattedTextMethod, when no parameter is passed, is equivalent togetRawTextMethods) :

If you need to internationalize the error message when an interface error occurs:

The above is the complete realization of the whole front-end internationalization program, see here, students who do not understand can combine the previous development ideas and continue.

For the current relatively popular international open source libraryreact-intlIn the project, it has the disadvantages of cumbersome configuration, can only be applied to the view layer, and has strong invasion. This paper introduces based onReact-hookThe implementation of simple front-end internationalization scheme, that is, to achieve common components andapiAnd put into use in the project.
Digression: Forreact-intlLibrary of flaws, Ali launchedreact-intl-universalLibrary, this library is also quite easy to use, provides more rich features, as why to write a set of solutions, it is a matter of opinion, because the project uses only a small number of components andapiBy understanding the principles, it is possible to implement a set of internationalization solutions on your own in a project.

If there are any omissions in the above content, please leave a message ✍️ to point out, and progress together 💪💪💪

If you find this article helpful, 🏀🏀 leave your precious 👍

React front-end internationalization
React Intl Use the document
React -intl Implements react internationalization in multiple languages
React Hook createContext & useContext cross-component passthrough context and performance optimization
Development: the react – intl – universal