locale-essentials v1.1.8
LocaleEssentials
LocaleEssentials is a localization library that provides functionality for easy localization in your web application. It allows you to load language files and dynamically update the content based on the selected language.
Features
- Loads language files in JSON format from specified directory.
- Allows users to switch between available languages.
- Automatically detects user's preferred language and sets it as default.
- Uses
data-localize
attribute to identify elements that need to be localized. - Falls back to default language if selected language file is not found.
Getting Started
To use LocaleEssentials, follow these steps:
- Install the LocaleEssentials library in your project:
npm install locale-essentials
- Import the
localize
function into your project:
import { localize } from 'locale-essentials';
- Call the
localize
function, passing in the following options as a single object parameter:
langDirectory
(required): The path to the directory containing the language files.defaultLanguage
(optional): The default language to use as a fallback. If not provided, English ('en') will be used as the default.langSwitch
(optional): An optional language switch element that allows users to change the language.
Example usage:
localize({
langDirectory: 'path/to/language/files/',
defaultLanguage: 'fr',
langSwitch: document.getElementById('lang-switch')
});
Language Files
LocaleEssentials expects language files to be in JSON format and follow a specific structure. Each language file should contain key-value pairs where the keys represent the translation keys and the values represent the translated strings.
Example language file (en.json
):
{
"greeting": "Hello!",
"message": "Welcome to our website.",
"button": "Click Me"
}
HTML Markup
To enable localization in your HTML markup, use the data-localize
attribute on the elements that need to be localized. The value of the attribute should correspond to the translation key in the language files.
<h1 data-localize="greeting"></h1>
<p data-localize="message"></p>
<button data-localize="button"></button>
When the localize
function is called, it will update the content of these elements based on the selected language.
Language Switch (optional)
If you provide a language switch element (langSwitch
) in the localize
function options, LocaleEssentials will enable the functionality to switch between different languages. The language switch element should contain buttons or links with a data-lang
attribute specifying the language code.
<div id="lang-switch">
<button data-lang="en">English</button>
<button data-lang="fr">Français</button>
</div>
When a language button is clicked, the localize
function will be called with the selected language, and the content will be updated accordingly.
Licence
This library is licensed under the MIT License.
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago