derzunov / Redux React I18n
Licence: mit
An i18n solution for React/Redux and React Native projects
Stars: ✭ 64
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Redux React I18n
i18n
internationalize projects to Arabic
Stars: ✭ 67 (+4.69%)
Mutual labels: i18n, internationalization, localization, l10n, arabic
android-studio-plugin
Integrate your Android project with Crowdin
Stars: ✭ 52 (-18.75%)
Mutual labels: i18n, internationalization, localization, l10n
python-fluent
Python implementation of Project Fluent
Stars: ✭ 142 (+121.88%)
Mutual labels: i18n, internationalization, localization, l10n
lisan
🌈i18n, Reimagined! 🚀A blazing fast and super small i18n library for Javascript
Stars: ✭ 85 (+32.81%)
Mutual labels: i18n, internationalization, localization, l10n
Mojito
An automation platform that enables continuous localization.
Stars: ✭ 256 (+300%)
Mutual labels: i18n, localization, internationalization, l10n
msgtools
Tools for Developing Diagnostic Messages
Stars: ✭ 18 (-71.87%)
Mutual labels: i18n, internationalization, localization, l10n
stone.js
gettext-like client-side Javascript Internationalization Library
Stars: ✭ 20 (-68.75%)
Mutual labels: i18n, internationalization, localization, l10n
Tourism Demo
Flutter app backed by Redux, shows animations, internationalization (i18n), ClipPath, fonts and others...
Stars: ✭ 232 (+262.5%)
Mutual labels: english, arabic, i18n, internationalization
inlang
Open Source Localization Solution for Software.
Stars: ✭ 160 (+150%)
Mutual labels: i18n, internationalization, localization, l10n
Fluent Rs
Rust implementation of Project Fluent
Stars: ✭ 503 (+685.94%)
Mutual labels: i18n, localization, internationalization, l10n
Fluent.js
JavaScript implementation of Project Fluent
Stars: ✭ 622 (+871.88%)
Mutual labels: i18n, localization, internationalization, l10n
labels
Bolt Labels extension - Translatable labels for Bolt
Stars: ✭ 18 (-71.87%)
Mutual labels: i18n, internationalization, localization, l10n
i18n
Package i18n is for app Internationalization and Localization.
Stars: ✭ 79 (+23.44%)
Mutual labels: i18n, internationalization, localization, l10n
figma-static-localizer
A Figma plugin for static localization
Stars: ✭ 30 (-53.12%)
Mutual labels: i18n, internationalization, localization, l10n
awesome-i18n
🌍 A curated list of i18n resources for all kind of languages and frameworks
Stars: ✭ 205 (+220.31%)
Mutual labels: i18n, internationalization, localization, l10n
I18N
I18N Library for .NET, and Delphi
Stars: ✭ 48 (-25%)
Mutual labels: i18n, internationalization, localization, l10n
Serge
Continuous localization platform
Stars: ✭ 212 (+231.25%)
Mutual labels: i18n, localization, internationalization, l10n
React Native Globalize
Internationalization (i18n) for React Native
Stars: ✭ 246 (+284.38%)
Mutual labels: i18n, localization, internationalization, l10n
rosetta
A blazing fast internationalization (i18n) library for Crystal with compile-time key lookup.
Stars: ✭ 23 (-64.06%)
Mutual labels: i18n, internationalization, localization, l10n
Angular-Gulp-Boilerplate
Clean but full-featured AngularJS boilerplate using Gulp workflow and best practices
Stars: ✭ 30 (-53.12%)
Mutual labels: i18n, internationalization, localization, l10n
redux-react-i18n
An i18n solution with plural forms support for Redux/React
Workers of all countries, unite!
Supported languages list with expected codes for pluralize mechanics switching
- Russian ( ru, ru-RU )
- English ( en, en-US, en-UK )
- French ( fr )
- German ( de )
- Polish ( pl )
- Czech ( cs )
- Portuguese ( pt )
- Brazilian Portuguese ( pt-BR, br )
- Arabic ( ar-AR, ar )
- Turkish ( tr )
- Occitan ( oc )
- Belarusian ( be )
- Bosnian ( bs )
- Croatian ( hr )
- Serbian ( sr )
- Ukrainian ( uk )
- ...
Example Demo
derzunov.github.io/redux-react-i18n
What's in demo?
- webpack/gulp dev/prod build system
- languages:
- English
- Russian
- Polish
- French
- Belarusian
- ...
- language switcher component
- simple key demo
- key with pluralization demo
git clone https://github.com/derzunov/redux-react-i18n redux-react-i18n
cd redux-react-i18n/example
npm i
and then
gulp
or
gulp prod
Short code demo
Write ( jsx ):
<Loc locKey="your_key_1"/>
<Loc locKey="your_key_2" number={1}/>
<Loc locKey="your_key_2" number={2}/>
<Loc locKey="your_key_2" number={5}/>
Result ( html ):
<span>Перевод вашего первого ключа из словаря для текущего языка</span>
<span>Пришла 1 кошечка</span>
<span>Пришли 2 кошечки</span>
<span>Пришло 5 кошечек</span>
What am I using:
pluralizer: ( github or npm ) for plural forms changing
translator: ( github or npm ) for translation (translator demo)
Install:
Terminal:
npm i redux-react-i18n
What's in the box
Components:
- Loc ( Container Component )
- LocPresentational ( Presentational Component )
Actions
- setCurrentLanguage( languageCode )
- setLanguages( languageCode )
- addDictionary( languageCode, dictionary )
- setDictionaries( dictionaries )
Reducer
- i18n
Full code demo ( complete solution for Redux ):
import { i18nReducer, i18nActions, Loc } from 'redux-react-i18n'
...
// "reducers" contains your reducers
reducers.i18n = i18nReducer
...
const store = createStore( combineReducers( reducers ) )
...
// Set dictionaries (simpliest example) -----------------------------------------------------------------------------------------------
// This dictionaries can be supported by Localization team without need to know somth about interface or project,
// and you just can fetch it to your project
const dictionaries = {
'ru-RU': {
'key_1': 'Первый дефолтный ключ',
'key_2': [ '$Count', ' ', ['штучка','штучки','штучек']], // 1 штучка, 3 штучки, пять штучек
'key_3': {
'nested_1': 'Первый вложенный ключ',
'nested_2': 'Второй вложенный ключ',
},
/* ... */
/* Other keys */
},
'en-US': {
'key_1': 'First default key',
'key_2': [ '$Count', ' ', ['thing','things']], // 1 thing, 2 things, 153 things
'key_3': {
'nested_1': 'First nested key',
'nested_2': 'Second nested key',
},
}
/* ... */
/* Other dictionaries */
}
store.dispatch( i18nActions.setDictionaries( dictionaries ) )
// / Set dictionaries (simpliest example) ---------------------------------------------------------------------------------------------
// Set languages (simpliest example) --------------------------------------------------------------------------------------------------
const languages = [
{
code: 'ru-RU',
name: 'Русский'
},
{
code: 'en-US',
name: 'English (USA)'
}
/* ... */
/* Other languages */
]
store.dispatch( i18nActions.setLanguages( languages ) )
// / Set languages (simpliest example) ------------------------------------------------------------------------------------------------
// Set current language code (you can map this action to select component or somth like this)
store.dispatch( i18nActions.setCurrentLanguage( 'ru-RU' ) )
And now you can use "Loc" container component
import { Loc } from 'redux-react-i18n'
...
<p>
<Loc locKey="key_1"/> // => Первый дефолтный ключ
</p>
<p>
<Loc locKey="key_2" number={7}/> // => 7 штучек
</p>
<p>
<Loc locKey="key_3.nested_1"/> // => Первый вложенный ключ
</p>
<p>
<Loc locKey="key_3.nested_2"/> // => Второй вложенный ключ
</p>
If you don't want to use a complete solution:
Just use a dumb component and you can design store/actions/reducers by yourself like you want
// Just import presentational component LocPresentational
import { LocPresentational } from 'redux-react-i18n'
...
...
...
// Then map data to props => currentLanguage, dictionary (See more in src/Loc.js):
const mapStateToProps = ( { /*getting data from the state*/ }, ownProps ) => ({
currentLanguage: yourCurrentLanguageFromState,
dictionary: yourDictionaryFromState
});
Loc = connect( mapStateToProps )( LocPresentational )
...
...
...
<p>
<Loc locKey="YOUR_KEY_1"/>
</p>
<p>
<Loc locKey="YOUR_KEY_2" number={42}/>
</p>
See more in src/*.js
Using with React Native
The "Span Problem"
If the span tag is a big problem (in "option" tag for example), you can use translate from 'translatr' like this
import translate from 'translatr'
...
...
...
<select>
<option value="1">
{ translate( dictionary, currentLanguage, key, number ) }
</option>
</select>
...
and just a simple example of mapStateToProps as a bonus:
const mapStateToProps = ( {i18n: { currentLanguage, dictionaries }}, ownProps ) => ({
currentLanguage: currentLanguage,
dictionary: dictionaries[ currentLanguage ]
});
Why?
With <Loc locKey="your_key" ></Loc>
you'll get:
<select>
<option> <span>Translated Text</span> </option>
</select>
With translate
you'll get:
<select>
<option> Translated Text </option>
</select>
... but you'll have to write extra code
PS You already have translatr as a dependency of redux-react-i18n in your node_modules
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].