omi-i18n solution for omi.js using i18next ecosystem
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example/omi initial version Oct 24, 2018
src initial version Oct 24, 2018
.coveralls.yml initial version Oct 24, 2018
.editorconfig initial version Oct 24, 2018
.eslintignore initial version Oct 24, 2018
.eslintrc initial version Oct 24, 2018
.gitignore initial version Oct 24, 2018
.npmignore initial version Oct 24, 2018
.travis.yml initial version Oct 24, 2018
CHANGELOG.md initial version Oct 24, 2018
LICENSE initial version Oct 24, 2018
README.md Update README.md Oct 25, 2018
index.js initial version Oct 24, 2018
mocha_setup.js initial version Oct 24, 2018
omi-i18n.js initial version Oct 24, 2018
omi-i18n.min.js initial version Oct 24, 2018
package.json initial version Oct 24, 2018
rollup.config.js initial version Oct 24, 2018

README.md

Introduction

This is a i18n implementation to be used with omi.js and is based on i18next internationalization framework.

What's the benefit of using i18next

Getting started

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install omi-i18n

Translating content:

## using t function

For translating basic content you can use the t function as:

import { t } from "omi-i18n";

<h1 class="app-title">{t("welcome")}</h1>;

For details using it see i18next translation essentials

## using i18n-text

Read more at the section web components.

Web Components

i18n-provider

It's the most outer element and is responsible to initialize the i18next instance.

Further it will trigger an update on parent and children on successful initialization (when ready to use t function).

import { tag, WeElement } from "omi";
import { t } from "omi-i18n";

const catalog = {
  welcome: "Welcome to {{name}} using omi-i18n"
};

@tag("my-app")
class MyApp extends WeElement {
  render(props, data) {
    return (
      <i18n-provider locale="en" catalog={catalog}>
        <p slot="loading">
          <spinner-element />
        </p>
        <h1 class="app-title">{t("welcome", { name: data.name })}</h1>
      </i18n-provider>
    );
  }
}

props

name description
locale the language to use (needed for plural handling)
catalog JSON containing all translations for details see i18next translation essentials

i18n-text

i18n text allows you to set translations in an element like:

// via i18n-provider provided catalog
const catalog = {
	"welcome": "Welcome to {{name}} using omi-i18n",
	"getStarted": "To get started, edit <code>src/elements/*/*.*</code> and save to reload."
}

<i18n-text key="welcome" options={{ name: 'omi v4' }} />
// output <span>Welcome to omi v4 using omi-i18n

<i18n-text ele="p" class="app-intro" key="getStarted" sethtml /*css={this.css}*/ />
// output <p class="app-intro">To get started, edit <code>src/elements/*/*.*</code> and save to reload.</p>

props

 name default  description
ele span the element to render
key undefined the translation key to lookup
options undefined t options see docs
sethtml false set the translation text as innerHtml -> allows you to have html in translations
css undefined pass down a css function to use
...rest undefined allows you to pass down any other prop to element eg. pass down the prop class to define a class

Gold Sponsors