enables localization of any page with zero effort.
Switch branches/tags
gh-pages greenkeeper-babel-cli-6.8.0 greenkeeper-babel-cli-6.9.0 greenkeeper-babel-cli-6.10.0 greenkeeper-babel-cli-6.10.1 greenkeeper-babel-core-6.8.0 greenkeeper-babel-core-6.9.0 greenkeeper-babel-core-6.9.1 greenkeeper-babel-core-6.10.4 greenkeeper-babel-eslint-6.0.5 greenkeeper-babel-eslint-6.1.0 greenkeeper-babel-eslint-6.1.1 greenkeeper-babel-eslint-6.1.2 greenkeeper-babel-preset-es2015-6.9.0 greenkeeper-eslint-2.10.0 greenkeeper-eslint-2.10.1 greenkeeper-eslint-2.10.2 greenkeeper-eslint-2.11.0 greenkeeper-eslint-2.11.1 greenkeeper-eslint-2.12.0 greenkeeper-eslint-2.13.0 greenkeeper-eslint-2.13.1 greenkeeper-eslint-3.0.0 greenkeeper-eslint-3.0.1 greenkeeper-eslint-plugin-react-5.2.1 greenkeeper-eslint-plugin-react-5.2.2 greenkeeper-i18next-3.2.0 greenkeeper-i18next-3.3.0 greenkeeper-i18next-3.3.1 greenkeeper-i18next-3.4.0 greenkeeper-i18next-3.4.1 greenkeeper-i18next-xhr-backend-0.5.5 greenkeeper-i18next-xhr-backend-0.6.0 greenkeeper-rimraf-2.5.3 greenkeeper-rollup-0.26.3 greenkeeper-rollup-0.26.4 greenkeeper-rollup-0.26.5 greenkeeper-rollup-0.26.6 greenkeeper-rollup-0.27.0 greenkeeper-rollup-0.27.1 greenkeeper-rollup-0.28.0 greenkeeper-rollup-0.29.0 greenkeeper-rollup-0.29.1 greenkeeper-rollup-0.30.0 greenkeeper-rollup-0.31.0 greenkeeper-rollup-0.31.1 greenkeeper-rollup-0.31.2 greenkeeper-rollup-0.32.0 greenkeeper-rollup-0.32.1 greenkeeper-rollup-0.32.2 greenkeeper-rollup-0.32.3 greenkeeper-rollup-0.32.4 greenkeeper-rollup-0.33.0 greenkeeper-rollup-0.33.1 greenkeeper-rollup-0.33.2 greenkeeper-rollup-0.34.0 greenkeeper-rollup-0.34.1 greenkeeper-rollup-plugin-babel-2.5.0 greenkeeper-rollup-plugin-babel-2.5.1 greenkeeper-rollup-plugin-babel-2.6.0 greenkeeper-rollup-plugin-babel-2.6.1 greenkeeper-rollup-plugin-commonjs-3.0.0 greenkeeper-rollup-plugin-commonjs-3.0.1 greenkeeper-rollup-plugin-commonjs-3.0.2 greenkeeper-rollup-plugin-commonjs-3.1.0 greenkeeper-rollup-plugin-node-resolve-1.6.0 greenkeeper-rollup-plugin-node-resolve-1.7.0 greenkeeper-rollup-plugin-node-resolve-1.7.1 greenkeeper-rollup-plugin-uglify-1.0.0 greenkeeper-rollup-plugin-uglify-1.0.1 greenkeeper-update-all greenkeeper-yargs-4.7.0 greenkeeper-yargs-4.7.1 greenkeeper-yargs-4.8.0 master mergeDOM
Nothing to show
Clone or download
Latest commit 9cbf92f Oct 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example update readme Sep 26, 2018
src adds listener for initial translated Mar 20, 2017
.babelrc proper jsnext build Mar 9, 2016
.editorconfig initial version Dec 21, 2015
.eslintignore initial version Dec 21, 2015
.eslintrc use rollup Mar 9, 2016
.gitignore update all deps Nov 1, 2017
.npmignore ignore src Mar 9, 2016
CHANGELOG.md rebuild Sep 12, 2018
LICENSE initial version Dec 21, 2015
README.md Fix typos in readme Oct 23, 2018
bower.json use rollup Mar 9, 2016
i18nextify.js rebuild Sep 12, 2018
i18nextify.min.js rebuild Sep 12, 2018
index.js add new entry point Mar 9, 2016
package.json rebuild Sep 12, 2018
rollup.config.js wip domMerge Jan 26, 2017

README.md

i18nextify

Just drop this script on your page and you're ready to deliver your pages in any language.

See the sample (code)!

i18nextify uses Virtual DOM to update your page with translations based on the current content. MutationObserver is used to trigger translations on newly added content.

i18nextify comes bundled with i18next.

Should play well with any static or dynamic page not using its own Virtual DOM.

Getting started

The easiest way for guaranteed success is using locizify on locize.com.

Alternatively:

Drop this script on your page.

<!DOCTYPE html>
<html>
  <head>
    <script src="/i18nextify.min.js"></script>
  </head>
  ...

Request your page with querystring params ?debug=true&saveMissing and open the browser console to see i18nextify in action. It will output all missing translations - start serving them from /locales/{{lng}}/translation.json.

See the example for details.

Initialize with options

<!DOCTYPE html>
<html>
  <head>
    <script src="/i18nextify.min.js"></script>
    <script>
      window.i18nextify.init({
        // defaults that are set
        autorun: true, // setting to false init will return an object with start function
        ele: document.body, // pass in another element if you like to translate another html element
        ignoreTags: ['SCRIPT'], // tags to ignore

        // per default not set
        ignoreIds: ['ignoreMeId'],
        ignoreClasses: ['ignoreMeClass'],

        // attributes to translate
        translateAttributes: ['placeholder', 'title', 'alt', 'value#input.type=button', 'value#input.type=submit'],

        // merging content (eg. a tags in p tags)
        mergeTags: [], // tags to merge innerHtml to one key
        inlineTags: [], // tags to inline (eg. a, span, abbr, ...)
        ignoreInlineOn: [], // tags to ignore inlining tags under inlineTags

        // cleanup for keys
        cleanIndent: true, // removes indent, eg. if a p tag spans multiple lines
        ignoreCleanIndentFor: ['PRE', 'CODE'], // ignores cleaning up of indent for those tags needing that extra spaceing
        cleanWhitespace: true, // removes surrounding whitespace from key

        namespace: false, // set a filename - default namespace will be translation
        namespaceFromPath: false // set true will use namepace based on window.location.pathname
        ns: ['common'] // -> only set if accessing more then one namepace

        // + all options available in i18next
      });
    </script>
  </head>
  ...

Merge content / using html in translations

Just set translated attribute:

<p merge>all inside will be used as on segment, even if having other <a>elements inside</a></p>

// key = all inside will be used as on segment, even if having other <a>elements inside</a>

Same could be done using options:

mergeTags: [], // tags to merge innerHtml to one key
inlineTags: [], // tags to inline (eg. a, span, abbr, ...)
ignoreInlineOn: [], // tags to ignore inlining tags under inlineTags

Fragment replacement for links and images

<img src="/images/{{a.png}}" alt="big A" />

You will find a.png to be a key in your translation files - it's value can be replaced to eg. a-de.png for German (all other languages will fallback to a.png)

<a href="/{{statistic}}">Open my statistics</a>

statistic will be a regular key that can be translated. But be aware you will need to provide that routes - eg. using localized routes on the server

Avoid translating

an element

Just set translated attribute:

<div translated>this won't get translated - nor this elements children</div>

By ignoring tag, class, id

Just add needed items to the specific array:

window.i18nextify.init({
  ignoreTags: ["SCRIPT"], // need to be uppercased
  ignoreIds: ["ignoreMeId"],
  ignoreClasses: ["ignoreMeClass"]
});
<SCRIPT>// this won't get translated - nor this elements children</SCRIPT>
<div id="ignoreMeId">this won't get translated - nor this elements children</div>
<div class="ignoreMeClass">this won't get translated - nor this elements children</div>

Just add translated-attribute

Translating an element with options

For extended translations like plurals, interpolation, ... you need to add options to the element

<div i18next-options='{"foo": "bar"}'>
  foo {{bar}}
  <p i18next-options='{"foo2": "bar2"}'>foo {{foo}}; foo2 {{foo2}}</p>
</div>

Translating JavaScript code

You can use the i18next instance used to provide the translation functionality directly. Just make sure the instance is initialized already:

<script>
  // use t function of i18next
  // https://www.i18next.com/translation-function/essentials
  function useI18next() {
    var translated = i18nextify.i18next.t('some key');
  }

  if (i18nextify.i18next.isInitialized) {
    useI18next();
  } else {
    i18nextify.i18next.on('initialized', function(options) {
      useI18next();
    })
  }
</script>

Options get inherited from parent to child nodes.

Set different namespaces

Default would be translation.

Set a different one:

window.i18nextify.init({
  namespace: "myNamespace"
});

autogenerate one per route:

window.i18nextify.init({
  namespaceFromPath: true
});

Access different namespaces

This is useful for reused elements that are on every page, eg. like footer,... and you're using namespaceFromPath. So you can avoid having that segments on every routes namespace file.

window.i18nextify.init({
  namespace: "translation", // -> set the default namespace
  ns: ["common"] // -> add additional namespaces to load
});
<div i18next-options='{"ns": "common"}'>
  <p>different namespace: i18next-options='{"ns": "common"}'</p>
  <p>set it on i18next options and assert to add it to <strong>i18next.options.ns array on init</strong></p>
</div>

Avoid flickering on initial load

<!DOCTYPE html>
<html>
  <head>
    <script src="/i18nextify.min.js"></script>
  </head>
  <body style="display: none">
  ...

Just set the element style display to none. i18nextify will change it to block when ready.

Change File to use

You can change the namespace after loading to some other file (eg. before transitioning to another page).

window.i18nextify.changeNamespace("newNamespace");

Gold Sponsors