https://github.com/neetjn/r-localize
Localization plugin for Riot.js based off of Vue.js v-localize project.
https://github.com/neetjn/r-localize
google i10n i18n javascript locale localize node riot ts typescript webpack
Last synced: about 1 month ago
JSON representation
Localization plugin for Riot.js based off of Vue.js v-localize project.
- Host: GitHub
- URL: https://github.com/neetjn/r-localize
- Owner: neetjn
- License: mit
- Created: 2018-01-28T01:51:20.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-29T02:01:17.000Z (almost 7 years ago)
- Last Synced: 2024-09-26T12:48:53.167Z (7 months ago)
- Topics: google, i10n, i18n, javascript, locale, localize, node, riot, ts, typescript, webpack
- Language: TypeScript
- Homepage: https://neetjn.github.io/r-localize/
- Size: 558 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# **r-localize**
[](https://travis-ci.org/neetjn/r-localize/)
[](https://badge.fury.io/js/r-localize)
[](https://www.npmjs.com/package/r-localize)
[](https://nodei.co/npm/r-localize/)
### About
**r-localize** is a localization plugin for Riot.js based off of Vue.js v-localize project.
### Support
| 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.
### Usage
To install via NPM, simply do the following:
```sh
npm install r-localize
```
For a quick start using jsdelivr:
```html
```
Using the plugin is then as simple as:
```js
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.
```html
English
Spanish
locale(e) {
this.localize.locale(e.target.value)
}
```
You can specify your localizations like so:
```html
```
Alternatively, you can fetch your current localization by calling `locale` without any arguments.
```html
Current Locale: { localize.locale() }
```
For fetching a specific locale item programatically within a component method:
```js
Translated Item: { localize.translate('header', 'es-SP') }
```
### Configuration
The plugin takes 5 options,
> **`*available`**: List of available localizations.
```js
['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 option `webStore` is enabled, mixin will store the locale in local storage for the next visit.
### Locale Options
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]()
### Contributors
* **John Nolette** ([email protected])
Contributing guidelines can be found [here](https://github.com/neetjn/r-localize/blob/master/CONTRIBUTING.md).
---
Copyright (c) 2018 John Nolette Licensed under the MIT license.