Simple Translator is an extremely lightweight solution (less than 9 kB) for translating content using pure JavaScript. Node JSnatively works in the browser. Simple client-side translation using pure JS.
More Features:
- Translate individual sentences
- Translate complete HTML pages
- Easily bring in JSON resource files (contain your translations)
- Take advantage of general assistant functions
- Automatically discover the user’s preferred language
How to make use of it:
Install & Download:
# Yarn $ yarn add @andreasremdt/simple-translator # NPM $ npm i @andreasremdt/simple-translator --save
1. Import the simple-translator library.
// ES Module import Translator from '@andreasremdt/simple-translator'; // Or from a CDN <script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js" defer ></script>
2. Define translations (key/value pairs) in JSON records data and place them into the i18n
folder.
// en.json { "title": "Title", "content": "Content" ... }
3. Add the data-i18n
attribute to the component you need to have a number of languages as follows:
<h1 data-i18n="title">Title</h1> <h1 data-i18n="content">Content</h1>
4. It additionally permits you to translate values in any attribute:
<div data-i18n=".label" data-i18n-attr="title" title="to be translated..."> Title </div>
5. Initialize the library.
var translator = new Translator({ // options here }); translator.fetch(['en']).then(() => { translator.translatePageTo('en'); });
6. Switch between languages.
translator.load("en"); translator.load("de");
7. Translate strings in a customized HTML attribute:
<div data-i18n="title" data-i18n-attr="title" title="Title..." > ... </div>
8. Determine whether to retailer the final selected language within the native storage. Default: false.
var translator = new Translator({ persist: true, persistKey: 'preferred_language' });
9. Specify the file path the place the JSON records data are positioned.
var translator = new Translator({ filesLocation: "/i18n" });
10. Determine the default language. Default: empty.
var translator = new Translator({ defaultLanguage: "de" });
11. Auto determines the userβs desired language.
var translator = new Translator({ detectLanguage: true });
12. Override the default selector.
var translator = new Translator({ selector: '[data-i18n]' });
13. Determine whether or not to register the helper globally.
var translator = new Translator({ registerGlobally: '__' });
14. API strategies.
// Translates a single translation string into the desired language. translator.translateForKey(String: key, String?: language); // Translates all DOM elements that match the selector ('[data-i18n]' by default) into the specified language. translator.translatePageTo(String?: language); // Registers a new language to the translator. translator.add(String: language, Object: translation); // Removes a registered language from the translator. translator.remove(String: language); // Fetches either one or multiple JSON files from your project by utilizing the Fetch API. translator.fetch(String|Array: languageFiles, Boolean?: save) // Gets the current language translator.currentLanguage
language translator javascript code for a website, Tagging elements for translation, simple-translator Github
See Demo And Downloa
Official Website(andreasremdt): Click Here
This superior jQuery/javascript plugin is developed by andreasremdt. For extra Advanced Usages, please go to the official website.
Be First to Comment