In the Name of Allah
react-multi-language
Helps you create multi-language pages.
- No server needed.
- Async support.
- No dependencies.
- Universal.
- Micro library.
Installation
Via npm:
npm install react-multi-language --save
Via yarn:
yarn add react-multi-language
API Reference
Determinator
returns a string or component.
Props:
children
:union(function, string, object)
:function
: can be an async function, the function will receive two arguments:- First is the current language, the function will be called anytime language changes(by
MultiLang
). - Second is a function which updates the currently displayed content by
Determinator
to the content that it receives according to the new language.
- First is the current language, the function will be called anytime language changes(by
string
: it will return the string with no mutation.object
: it must follow below pattern and returns the value of the matched key (based onprops.lang
ofMultiLang
).
language: content // e.g. fr: "Bonjour le monde" en: "Hello World"
till
:union(component, string)
:Determinator
renders the value ofprops.till
untill the async function that is passed asprops.children
toDeterminator
update the currently displayed content.
MultiLang
must be after all the Determinators.
Props:
lang
: string
: the current language will be applied to the Determinators.
withLang
A higher-order component, it is very similar to Determinator
withLang(children)(Component)
children
:union(function, object)
:function
: can be an async function, the function will receive two arguments:- First is the current language, the function will be called anytime language changes(by
MultiLang
). - Second is a function which updates the currently displayed content to the content that it receives according to the new language.
- First is the current language, the function will be called anytime language changes(by
object
: it must follow below pattern and returns the value of the matched key (based onprops.lang
ofMultiLang
).
language: content // e.g. fr: Hello: "Bonjour" World: "monde" imageURL: "https://example.com/200x200DB570BC6-F1CA-101F-C227-37B227673AD6.jpg?lang=fr" en: Hello: "Hello" World: "world" imageURL: "https://example.com/200x200DB570BC6-F1CA-101F-C227-37B227673AD6.jpg?lang=en"
The wrapped component receives three props:
lang
: the current language.langProps
: the content of the current language.determinator
: is similar toDeterminator
but it is not component and does not support functions.
;
using props.determinator
rather than Determinator
is recommended.
Examples
;; state = lang: "en" ; { this; }; { return <div onClick=thischangeLang> <Determinator> fr: "Bonjour le monde" en: "Hello World" </Determinator> <Determinator till=<span>Loading...</span>> async { ; } </Determinator> <Determinator> "Hello World" </Determinator> /*MultiLang component must be after all the Determinators*/ <MultiLang lang=thisstatelang/> </div> ; } ;
Fetching data when needed is one of the most common use cases for async functions:
;; state = lang: "en" ; { this; }; { return <div onClick=thischangeLang> <Determinator till=<span>Loading...</span>> async { ; } </Determinator> /*MultiLang component must be after all the Determinators*/ <MultiLang lang=thisstatelang/> </div> ; } ;
Using withLang
:
;; const MyComponent = <div> <p>propslang</p> <p>propslangPropsHW</p> <img src=propslangPropsimageURL/> <img src="http://example.com/200x200DB570BC6-F1CA-101F-C227-37B227673AD6.jpg?lang=" + propslang/> </div>; state = lang: "en" ; { this; }; { return <div onClick=thischangeLang> <MyComponent/> <MultiLang lang=thisstatelang/> </div> ; } ;
License
MIT License