Awesome Open Source
Awesome Open Source

r-localize

build npm version npm

NPM

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:

npm install r-localize

For 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>

Configuration

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 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

Contributing guidelines can be found here.


Copyright (c) 2018 John Nolette Licensed under the MIT license.

Alternatives To R Localize
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,058,747
Typescript (245,560
Plugin (113,900
Vue (65,889
Google (36,795
Webpack (23,625
Localization (5,321
I18n (4,834
Riot (1,187
Riotjs (305
Locale (194
Localize (32
I10n (31