i18next is a very popular internationalization library for browser or any other javascript environment (eg. node.js). i18next is exported in UMD format and can be loaded via commonjs, requirejs (AMD) or will be added to global scope window.i18next.
1. Initialize the plugin by referencing the necessary files:
<script src='path/to/i18next.min.js'></script>
<script src='path/to/i18nextXHRBackend.min.js'></script>
<script src='path/to/i18nextBrowserLanguageDetector.min.js'></script>
<script src='path/to/jquery-i18next.min.js'></script>
2. Binding component to DOM element.
<div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">
<i class="flag-icon flag-icon-us"></i> English
</a>
<a href="#" class="dropdown-item">
<i class="flag-icon flag-icon-es"></i> Spanish
</a>
<a href="#" class="dropdown-item">
<i class="flag-icon flag-icon-pt"></i> Portuguese
</a>
<a href="#" class="dropdown-item">
<i class="flag-icon flag-icon-fr"></i> French
</a>
</div>
3. Basic usage may look something like this.
i18next
.use(window.i18nextXHRBackend)
.init({
debug: true,
fallbackLng: false,
backend: {
loadPath: "../app-assets/data/locales/{{lng}}/{{ns}}.json",
},
returnObjects: true
},
function (err, t) {
// Initialize Localization
jqueryI18next.init(i18next, $);
});
Refer following links for usage: