# Introduction
Source can be loaded via [npm](https://www.npmjs.com/package/jquery-i18next) or [downloaded](https://github.com/i18next/jquery-i18next/blob/master/jquery-i18next.min.js) from this repo or from a CDN like [CDNJS](https://cdnjs.com/libraries/jquery-i18next).
--------------
**NEWS: localization as a service - locize.com**
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using [Locize](https://www.locize.com/?utm_source=jquery_i18next_readme&utm_medium=github&utm_campaign=readme) you directly support the future of i18next.
--------------
## Advice:
To see jquery-i18next in a working app example, check out [this blog post](https://www.locize.com/blog/jquery-i18next/?utm_source=jquery_i18next_readme&utm_medium=github&utm_campaign=readme) and [this example](https://github.com/i18next/jquery-i18next/tree/master/example/landing).
--------------
If you don't use a module loader it will be added to window.jqueryI18next
```
# npm package
$ npm install jquery-i18next
```
Simplifies i18next usage in projects built based on jquery, like:
page source:
```html
```
## Initialize the plugin
```js
jqueryI18next.init(i18nextInstance, $, {
tName: 't', // --> appends $.t = i18next.t
i18nName: 'i18n', // --> appends $.i18n = i18next
handleName: 'localize', // --> appends $(selector).localize(opts);
selectorAttr: 'data-i18n', // selector for translating elements
targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if different than itself)
optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
useOptionsAttr: false, // see optionsAttr
parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
});
```
## TypeScript
jquery-i18next ships with type definitions. The `init` options are fully typed, and (when you keep the default handle names) `$.t`, `$.i18n` and `$(selector).localize(opts)` are added to the jQuery types via [`@types/jquery`](https://www.npmjs.com/package/@types/jquery).
```ts
import i18next from 'i18next';
import jqueryI18next from 'jquery-i18next';
jqueryI18next.init(i18next, $, {
useOptionsAttr: true, // typed, autocompleted and checked
});
$('.nav').localize();
$('#btn1').localize({ count: 2 });
const home: string = $.t('nav.home');
```
> If you rename the handles (`tName` / `i18nName` / `handleName`), the bundled jQuery augmentation still reflects the default names — type those custom members yourself via module augmentation.
## using options in translation function
```js
$("#btn1").localize(options);
```
or
```js
$("#btn1").localize();
// make sure you set the useOptionsAttr option to true if you want to pass the i18n options via data-i18n-options attribute.
```
`data-i18n-options` attribute must be a valid JSON object.
## usage of selector function
### translate an element
```js
$("#btn1").localize(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
$(".nav").localize();
```
### translate some inner element
```js
$(".outer").localize();
```
### set different attribute
```js
$("#btn1").localize();
```
### set multiple attributes
```js
$("#btn1").localize();
```
### set innerHtml attributes
```js
$("#btn1").localize();
```
### prepend content
```js
insert before me, please!
$("#btn1").localize();
```
### append content
```js
append after me, please!
$("#btn1").localize();
```
### set data
```js
$("#btn1").localize();
```
--------------
