Simplest ever I18N 1 KB library for HTML/JavaScript apps.

Overview

Ultimate I18n JS

Ultimate I18n JS 🤯

Build Status License: MIT View this project on NPM Twitter: b4rtaz

Ultimate internationalization library for web applications.

  • Super simple & easy.
  • Less than 1KB (minified and gziped).
  • 0 dependencies.
  • SEO friendly (default language will be indexed).
  • Automatic a user's language detection.
  • It remembers a language change (uses local storage).
  • JavaScript / TypeScript support.
  • Support all modern browsers (it uses the MutationObserver internally).

🤩 Online Examples

🚀 Use with Static HTML Web App

Set your default language code in the html tag.

<html lang="en">

Add this library as the first script in your <head> section.

<head>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
   ...
</head>

That's it! 🤯 Now you can add language attributes to any element on your page.

<body>
  <h1
    i18n-pl="Witaj świecie"
    i18n-es="Hola Mundo">
    Hello World <!-- Your default language (en) -->
  </h1>

To change language call the set function.

UltimateI18n.set('es');
<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>

Check examples for static HTML web apps

🚀 Use with Module Bundler

Install this package.

npm install ultimate-i18n-js

Set your default language code in the html tag.

<html lang="en">

Call the setup method before your app start.

import * as UltimateI18n from 'ultimate-i18n-js';

UltimateI18n.setup();

That's it! 🤯 Now you can add dynamicaly content to your app.

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('placeholder').innerHTML = `
    <span
      i18n-pl="Kocham czerwony"
      i18n-es="Amo el rojo">
      I love red
    </span>
  `;
});

To change language call the set function.

UltimateI18n.set('es');

Check examples for Webpack apps

API

  • UltimateI18n.set('es') - Changes the current language.
  • UltimateI18n.get() - Reads the current language.
  • UltimateI18n.setup() - Initializes the library. This step is required only for a late setup.
  • UltimateI18n.isSupported - Returns true if the library is enabled, otherwise false.

👷‍♂️ TODO

React and Angular is not supported yet.

The dynamic attribute change is not supported yet. The below code currently doesn't work properly.

const season = document.getElementById('season');
season.innerHtml = 'Summer';
season.setAttribute('i18n-pl', 'Lato');
season.setAttribute('i18n-es', 'El verano');

Use the below approach instead. Basically you need to replace a whole element.

document.getElementById('seasonContainer').innerHTML = `
   <h2
      i18n-pl="Lato"
      i18n-es="El verano">
      Summer
   </h2>`;

Or:

const newSeason = document.createElement('h2');
newSeason.innerHtml = 'Summer';
newSeason.setAttribute('i18n-pl', 'Lato');
newSeason.setAttribute('i18n-es', 'El verano');

oldSeason.replaceWith(newSeason);

💡 License

This project is released under the MIT license.

You might also like...

The only Backend you'll ever need. Written in NodeJS, works with any stack

The only Backend you'll ever need. Written in NodeJS, works with any stack Conduit Platform Conduit is a NodeJS-based Self-Hosted backend, that aims t

Nov 24, 2022

The only job board you will ever need.

Jobilist A stunning job search engine that helps job seekers find the perfect employment opportunity by connecting them with the best employers around

Nov 23, 2022

The easiest quiz night you'll ever run.

The easiest quiz night you'll ever run.

Quizzler The easiest quiz night you'll ever run. About The Project Quizzler is a fun new way to practice, improve, and test your Javascript skills. Du

Oct 29, 2022

Grassp is the first ever CLI based Micro Learning Tool!

grassp-cli Grassp is the first ever CLI based Micro Learning Tool! grassp-cli Usage Commands Usage $ npm install -g grassp $ grassp COMMAND running co

Aug 9, 2022

An extension for rating the web and making your browsing experience better than ever.

An extension for rating the web and making your browsing experience better than ever.

Hookmark An extension for rating the web and making your browsing experience better than ever. Read more about it here Update Firefox extension was un

Sep 17, 2022

The smallest CMS engine ever, made with ASP. NET Core and Dapper

TinyCMS The smallest CMS engine ever, made with ASP.NET Core and Dapper. Currently, only static content is supported, but adding new pages is as simpl

Oct 26, 2022

Sharing short code samples, logs or links is now easier than ever!

Sharing short code samples, logs or links is now easier than ever!

Pastebin Sharing short code samples, logs or links is now easier than ever. Explore the docs » • Report Bug • Request Feature • About The Project With

Nov 26, 2022

The only developer portfolio template you'll ever need with modern UI/UX.

The only developer portfolio template you'll ever need with modern UI/UX.

Personal Portfolio Deployed link: https://parthmittal.netlify.app/ Table of Contents 📁 Tech Stack Implemented Sections Use as a theme Contributing In

Nov 14, 2022

The i18n module for https://waya.one

👋 Hello fellow Humans Translations With the last update, @Waya#0325 got support for multi langauges. Inside of this repo, you will be able to find al

May 8, 2022
Owner
Bart Tadych
Bart Tadych
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
This repo has demos, content and documentation of javascript concepts and syntax, in their simplest form. Contribute by sharing your understanding of javascript! Hacktoberfest Accepted!

javascript-documentation open-source hacktoberfest2022 Submit your PR to this javascript-documentation repo ?? ?? ❗ This repo has some of my javascrip

Austin Lynch 7 Nov 2, 2022
The simplest way to use AWS/GCP/Azure. From code to cloud in a few minutes.

Utopiops Utopiops is the best way for teams of any size to use cloud (AWS/Azure/GCP), with or without prior experience. We provide a platform that hel

utopiops 98 Sep 20, 2022
The simplest yet effective jQuery idle plugin

jquery.inactivity The simplest yet effective jQuery idle (inactivity) plugin Download Uncompressed Compressed Purpose Listen for mouse, keyboard, touc

Alexandros 11 Oct 18, 2022
This is the simplest possible nodejs api using express.

NodeJS JWT Authentication sample A Todo Application with NodeJS and ExpressJS that uses JWT authentication to manage each user's todos. Available APIs

Yacine Maouche 3 Sep 11, 2022
The simplest implementation of Golang channels, selects and wait groups

TypeScript Channels The simplest implementation of Golang channels, selects and wait groups Installation You can use one of the following package mana

Dimitar Ruskov 8 Sep 10, 2022
JavaScript plugin for adding multilingual website. i18n.

Lieu JavaScript plugin for adding multilingual website. Installation npm install lieu or download lieu.js from /dist. ES6 import Lieu from 'lieu'; co

Leadrate 11 Aug 22, 2022
A script that implements a GUI to make cheating on Blooket easier than ever.

BlooketUI What's BlooketUI? A script that implements a GUI to make cheating on Blooket easier than ever. How do i Use This? Copy the code of src.js by

null 64 Nov 18, 2022