localizator.js v0.1.4

localizator.js

Very simple module for translate your texts with custom params, cases and plurals.

Features

• Simple, fast and small
• Custom params for translate
• Custom params for plural

Menu

• Basic usage
• Usage with params
• Usage with plural form
• Usage in React
• Usage in Vue
• Usage in Svelte

Installing

Using npm:

npm install localizator.js

Usage

Register new localizator class

javascript:

import loc from 'localizator.js';

const myLoc = new loc(localeObject);

Change locale

javascript:

myLoc.c(localeObject);

Get translate

locale:

{
  "some.key": "some translate"
}

javascript:

myLoc.t('some.key'); // some translate

Get nested translate

locale:

{
  "some": {
    "key": "some translate"
  }
}

javascript:

myLoc.t(['some', 'key']); // some translate

Get translate with wrong key

javascript:

myLoc.t('wrong.key'); // wrong.key

Get translate with wrong key and fallback

javascript:

myLoc.t('wrong.key', 'some fallback'); // some fallback

Get translate with params

Params in array:

locale:

{
  "some.key": "some $0"
}

javascript:

myLoc.t('some.key', 'some fallback', ['param']); // some param

Params in object

locale:

{
  "some.key": "some {test}"
}

javascript:

myLoc.t('some.key', 'some fallback', { test: 'param' }); // some param

Get translate with plural form

locale:

{
  "plural": "$0 [subs,subscriber,subscribers,subscribers]"
}

[varName, firstForm, secondForm, thirdForm];

// varName - name of variable *surprised Nicolas Cage*

// firstForm - singular form (one apple - en, одно яблоко - ru)

// secondForm - plural form, like two items (two apples - en, два яблока - ru)

// thirdForm - plural form, like five items (five apples - en, пять яблок - ru)

One item

javascript:

myLoc.t('plural', 'some fallback', [1], { subs: 1 }); // 1 subscriber

Two items

myLoc.t('plural', 'some fallback', [2], { subs: 2 }); // 2 subscribers

Five items

myLoc.t('plural', 'some fallback', [5], { subs: 5 }); // 5 subscribers

Usage with React

Without context

registration:

import l from 'localizator.js';

window.l = new l(localeObject);

usage in jsx:

render() {
  return (
    <div>
      { window.l.t(params) }
    </div>
  )
}

With context

registration:

import l from 'localizator.js';

export const SomeContext = React.createContext({
  l: new l(localeObject)
});

...

render() {
    return (
      <div>
        <SomeContext.Provider>
          {this.props.children}
        </SomeContext.Provider>
      </div>
    );
  }

usage:

import { SomeContext } from '../path/to/provider';

...

render() {
    return (
      <div>
        <SomeContext.Consumer>
          {({ l }) => (
            <div>
              {l.t(params)}
            </div>
          )}
        </SomeContext.Consumer>
      </div>
    );
  }

Usage with Vue

You must be use localizator.js as vue plugin

registration:

import loc, { vuel } from 'localizator.js';

Vue.use(vuel, { loc, localeObject });

usage:

<script>
  export default {
    ...
    methods: {
      translate() {
        return this.$t(params)
      }
    }
  }
</script>

<template>
  <div>
    {{ $t(params) }}
  </div>
</template>

change locale:

<script>
  export default {
    ...
    methods: {
      changeLocale() {
        this.$cl(localeObject)
      }
    }
  }
</script>

if you use typescript, you must be create localizator.d.ts file into src folder, and write into him:

import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $t: (
      k: string,
      f?: string,
      p?: Array<string | number> | { [key: string]: string },
      pl?: { [key: string]: number }
    ) => string;
    $cl: (newLocale: { [key: string]: string }) => void;
  }
}

Usage with Svelte

registration:

// main.js
import App from './App.svelte';
import { Store } from 'svelte/store.js';
import loc from 'localizator.js';
const l = new loc({ test: 'test' });
new App({
  target: document.body,
  store: new Store({
    l
  })
});

usage in components:

<div>
  { $t.t(params) } // translate

  <button on:click="someMethod(localeObject)">change locale</button>
</div>

<script>
  export default {
    ...
    methods: {
      someMethod(localeObject) { // change locale
        const { l } = this.store.get();
        l.c(localeObject);
        this.store.set({ l });
      }
    }
  }
</script>