Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mthh/loc-i18next
Smart selectors to be used with i18next (same API as jquery-i18next but with html5 selectors)
https://github.com/mthh/loc-i18next
i18n i18next internationalization no-jquery translation
Last synced: 6 days ago
JSON representation
Smart selectors to be used with i18next (same API as jquery-i18next but with html5 selectors)
- Host: GitHub
- URL: https://github.com/mthh/loc-i18next
- Owner: mthh
- License: mit
- Created: 2016-10-02T18:34:14.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T21:19:00.000Z (about 1 month ago)
- Last Synced: 2024-10-16T02:22:20.255Z (21 days ago)
- Topics: i18n, i18next, internationalization, no-jquery, translation
- Language: JavaScript
- Homepage:
- Size: 316 KB
- Stars: 46
- Watchers: 5
- Forks: 14
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# loc-i18next
## Introduction
A replicate of [jquery-i18next](https://github.com/i18next/jquery-i18next) module (which is great by the way!), intended for use without jquery.
## Comparaison with `jquery-i18next`
jquery-i18next plugin :
```js
jqueryI18next.init(i18nextInstance, $);
$(".nav").localize();
```
loc-i18next :
```js
localize = locI18next.init(i18next);
localize(".nav");
```
## Initialize the plugin
*With options :*
```js
import i18next from 'i18next';
import locI18next from "loc-i18next";
const localize = locI18next.init(i18next, {
selectorAttr: 'data-i18n', // selector for translating elements
targetAttr: 'i18n-target',
optionsAttr: 'i18n-options',
useOptionsAttr: false,
parseDefaultValueFromContent: true
document: window.document,
});
```
*Using default values :*
```js
import i18next from 'i18next';
import locI18next from "loc-i18next";
const localize = locI18next.init(i18next);
```
## Using options in translation function
```js
localize("#btn1", options);
```
or
## Usage of selector function
### translate an element
```js
localize("#btn1", options);
```
myKey: same key as used in i18next (optionally with namespaces)
options: same options as supported in i18next.t
### translate children of an element
```js
localize(".nav");
```
### translate some inner element
```js
localize(".outer");
```
### set different attribute
```js
localize("#btn1");
```
### set multiple attributes
```js
localize("#btn1");
```
### set innerHtml attributes
```js
localize("#btn1");
```
### prepend content
```js
insert before me, please!
localize("#btn1");
```
### append content
```js
append after me, please!
localize("#btn1");
```
### set as an attribute
```js
localize("#btn1");
```
### use a custom `document` object
```js
const shadowRoot = document.body.attachShadow();
const template = document.getElementById("template");
shadowRoot.appendChild(template.content.cloneNode(true));
localize("#btn1", {document: shadowRoot});
```
## Motivation
- Having an occasion to try some packages like rollup, babel or uglify.
- Obtaining the same kind of functionnalities than with `jquery-i18next` in a project not using jquery.
## Project actively using `loc-i18next`
- [Magrit](https://github.com/riatelab/magrit) : [http://magrit.cnrs.fr/](http://magrit.cnrs.fr/)
## Blog posts about using `loc-i18next`
- [https://code.tutsplus.com/tutorials/translating-stimulus-apps-with-i18next--cms-30770](https://code.tutsplus.com/tutorials/translating-stimulus-apps-with-i18next--cms-30770)
- [https://phraseapp.com/blog/posts/localizing-stimulusjs-i18next/](https://phraseapp.com/blog/posts/localizing-stimulusjs-i18next/)