View on GitHub

r-localize

Localization plugin for Riot.js based off of Vue.js v-localize project.

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:

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= />
<!-- 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

John Nolette (john@neetgroup.net)

Contributing guidelines can be found here.