r-localize is a localization plugin for Riot.js based off of Vue.js v-localize project.
| Chome | Edge | Firefox | Opera | Safari |
|---|---|---|---|---|
| 5.0+ ✔ | ✔ | 4.0+ ✔ | 11.50+ ✔ | 5.0+ ✔ |
This project was developed using Riot.js 3, support for previous versions is not available.
To install via NPM, simply do the following:
npm install r-localizeFor a quick start using jsdelivr:
<script src="https://cdn.jsdelivr.net/npm/r-localize/dist/r-localize.js"></script>Using the plugin is then as simple as:
import riot from 'riot'
import Localize from 'r-localize'
const options = {
debug: true,
default: 'en-US',
fallback: '-',
available: ['en-US', 'es-SP']
}
const localizations = {
'en-US': {
'header': 'international',
'menu': {
'help': 'Help'
}
},
'es-SP': {
'header': 'internacional',
'menu': {
'help': 'Ayuda'
}
}
}
localize = new Localize(riot, options, localizations)Once your Riot app has been mounted, the language can be changed by calling localize.locale(args*) from your component.
<component>
<select change={ locale }>
<option value="en-US">English</option>
<option value="es-SP">Spanish</option>
</select>
<script>
locale(e) {
this.localize.locale(e.target.value)
}
</script>
</component>You can specify your localizations like so:
<!-- add a localized title to this element targeting en-US -->
<h1 data-is="localize" t={{ i: 'header', attr: 'title' }} />
<!-- replace this element's text with localized item -->
<h1 data-is="localize" t="menu.help">Alternatively, you can fetch your current localization by calling locale without any arguments.
<h1>Current Locale: { localize.locale() }</h1>For fetching a specific locale item programatically within a component method:
<h1>Translated Item: { localize.translate('header', 'es-SP') }</h1>The plugin takes 5 options,
*available: List of available localizations.
['en-US', 'es-SP', 'pr-BR', {
locale: 'ar-MS',
orientation: 'rtl'
}]
*debug: Spit info, warnings and errors to console.
*default: Default locale key to target.
fallbackContent: Use the existing node's text content if enabled and requested localization is not found.
*fallback: Default text to show if localization for current language not found.
webStore: If the mixin is accessed within a web context and optionwebStoreis enabled, mixin will store the locale in local storage for the next visit.
Locale configuration currently supports the following options,
orientation: Text direction of target element, useful for orientation of script languages.
fontFamily: Font family to change to. Re: https://www.w3schools.com/jsref/prop_style_fontfamily.asp
- John Nolette ([email protected])
Contributing guidelines can be found here.
Copyright (c) 2018 John Nolette Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent