@kryptand/transmono NPM

TRANS.mono

TRANS.mono is a customizable and easy to use dependency free, web-component based translation library. It can be used in other web component based projects, Angular, React, Vue or Ember. Currently the library is a build in progress and the API is subject to change.

Installation

npm install @kryptand/transmono

Web components

Import the components directly either by providing a script tag for example : <script type="module" src='https://cdn.jsdelivr.net/npm/@kryptand/transmono@0.0.4/dist/index.js'></script> or if you installed the package via npm import the package inside your root component - for example: import "@kryptand/transmono";

Stencil

Switch to your root component, if you use the stencil CLI to generate your project, this file can usually be found at the following location: src/components/global/app.ts.

import within the root component: import "@kryptand/transmono";

Angular

look up https://stenciljs.com/docs/angular

React

look up https://stenciljs.com/docs/react

Vue

look up https://stenciljs.com/docs/vue

Ember

look up https://stenciljs.com/docs/ember

Usage

Register the provider

In the root component of your project create an instance of the translation provider. ... <kryptand-translation-provider defaultLang="de-DE"> </kryptand-translation-provider> ... Specify the default language - for example de-DE There are a lot of other inputs you can use to further customize your provider. Look up the Provider documentation for further information.

Translate keys

To translate text in your application use the <kryptand-translate></kryptand-translate> Component. The most basic implementation would be as following: <kryptand-translate name="translationKey" value="World"></kryptand-translate> For further information consult the component documentation.

Provide translation files

TRANS.mono default translation loader looks for translation files in the .json format. The default lookup URL is [BASE_URL]/assets/i18n/[CURRENT_LANG].json

Translation files follow a simple key value pattern. For example your file could look like this: { "translationKey": "Hallo, {{value}}" } Placeholders in your translation texts can be provided as well. To insert a placeholder use the {{PLACEHOLDER}} syntax.

Advanced Usage

As stated in the introduction TRANS.mono gives you the flexibility to customize every bit if you need it.

Roll your own Translation Loader

If you want to load translation files that are not in the .json Format or you have a remote location you want to store your files on you can create your own translation loader.

There will be further information coming soon™.