https://github.com/kryptand/transmono
The simple to use translation library for your component based application.
https://github.com/kryptand/transmono
angular react stencil translation wc
Last synced: about 1 month ago
JSON representation
The simple to use translation library for your component based application.
- Host: GitHub
- URL: https://github.com/kryptand/transmono
- Owner: Kryptand
- License: mit
- Created: 2020-09-16T15:55:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-28T10:57:09.000Z (over 5 years ago)
- Last Synced: 2025-03-13T13:07:34.542Z (over 1 year ago)
- Topics: angular, react, stencil, translation, wc
- Language: TypeScript
- Homepage:
- Size: 941 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TRANS.mono
[](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/)[](https://badge.fury.io/js/%40kryptand%2Ftransmono)
[](https://npmjs.org/package/@kryptand/transmono)
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 :
``
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.
[...]
``
``
[...]
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](https://github.com/Kryptand/transmono/blob/master/src/components/kryptand-translation-provider/readme.md) for further information.
## Translate keys
To translate text in your application use the ```` Component.
The most basic implementation would be as following:
``
``
For further information consult the [component documentation](https://github.com/Kryptand/transmono/blob/master/src/components/kryptand-translate/readme.md).
## 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™.
## Add translation entities at runtime
There will be further information coming soon™.