attr-i18n

attr-i18n (Internationalization through HTML attributes)

Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

Install

npm i attr-i18n

# or

yarn add attr-i18n

Usage

First import and initialize the module.

import { AttrI18n } from 'attr-i18n';

const languages = ['English', 'हिन्दी', 'français'];

new AttrI18n(languages, {
	attr: 'data-translation',
	path: 'assets/translations',
	debug: true,
	togglerID: 'language-toggle',
	defaultLang: languages[0]
});

Then in your HTML file(s):

  1. Add an HTML select element with the ID corresponding to the togglerID option above. This select element will toggle between languages
  2. Add the translation files in the folder you specified in the path option above. Each of the language files should be named after the language name as it appears in the languages array above.
  3. Use the data-translation attribute as set in the option attr above by adding it to each element you want translated. The data-translation attribute accepts a dot-delimited string which points to the translation you want to use.

Options

Name Type Required Default Description
attr string false data-attr-i18n HTML attribute which contains the translation key
path string false assets/attr-i18n Path to the folder which contains the translation JSON file(s)
debug boolean false false Turns debug mode on/off
togglerID string false attr-i18n-toggler ID attribute for the language toggle HTML select element
defaultLang string false languages[0] The default language. If not provided, the first one from the array is used

Example HTML

Language selector HTML select element

<select id="language-toggle">
	<option>English</option>
	<option>हिन्दी</option>
	<option>français</option>
</select>

Page content

<h1 data-translation="form.desc">Fill Your Details!</h1>

<div class="form-row">
	<label data-translation="form.name">Name:</label>

	<input type="text" name="UserName" size="35" maxlength="35" value="" data-translation="form.name" />
</div>

<div class="form-row">
	<label data-translation="form.age">Age:</label>

	<input type="number" name="Age" size="35" maxlength="35" value="" data-translation="form.age" />
</div>

<div class="form-row">
	<p data-translation="form.exe.desc">Do you exercise at home?</p>

	<ul>
		<li>
			<input type="radio" name="exe" value="1" />

			<label data-translation="form.exe.yes">Yes</label>
		</li>

		<li>
			<input type="radio" name="exe" value="2" />

			<label data-translation="form.exe.no">No</label>
		</li>
	</ul>
</div>

LICENSE

MIT


Connect with me:

                     

Support and sponsor my work:


Go back

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image