Skip to content
Two Mi18n

Frameworks

The Two Mi18n library is designed to work with a script tag, which can be head-scratching to set up in some Javascript Frameworks.

You can find examples of usage for specific frameworks below.

Astro

Section titled “Astro”

I made my own portfolio with Astro and the Two Mi18n library. You can find the code here.

Initialization

Section titled “Initialization”

In Astro, it’s good practice to use a component like Translations.astro to encapsulate the library code.

Create an Astro component and add the <script> tag to your page. Here we called it Translations.astro.

---


---


<script defer src="https://unpkg.com/two-mi18n@latest/dist/TwoMi18n.umd.js"></script>


[...]


<script>
  const translations = {
        //Create translation object here
    }


    const twoMi18n = new TwoMi18n(translations); //Initialize TwoMi18n object.
</script>

Add this component to each of your pages or to your Layout based on your needs.

In the portfolio example, I have added it to my NavBar.astro, which is called in my MainLayout.astro.

---
import Translations from "@components/Translations.astro";


[...]


---


[...]
    <Translations />
[...]

Usage

Section titled “Usage”

Create an HTML Element

Section titled “Create an HTML Element”

Add an HTML Element in your Astro component. It can be a <select>, a <button>, or any element that can be triggered with Javascript.

In the portfolio example, I used two <button> tags to switch from English to French.

<div id="translation-container" class="grid grid-flow-col gap-1">
  <button id="translation-button-en">EN</button>
  [...]
  <button id="translation-button-fr">FR</button>
</div>

Handle the Javascript

Section titled “Handle the Javascript”

Use the <script> tag in your Astro component. Inside, we are going to catch the user interaction from our HTML Element and call the translateHTML() method accordingly.

[...]


<script>
    const translations = {
        default: "en",
        en: {
            [...]
        },
        fr: {
            [...]
        },
    }


    const twoMi18n = new TwoMi18n(translations);


    const buttonEN = document.getElementById("translation-button-en");
    const buttonFR = document.getElementById("translation-button-fr");


    buttonEN?.addEventListener("click", () => {
        twoMi18n.translateHTML("en");
    });
    buttonFR?.addEventListener("click", () => {
        twoMi18n.translateHTML("fr");
    });
</script>

Go Further

Section titled “Go Further”

In the portfolio example, I have create a handleTanslation(lang) method to add more functionalities like disabling buttons, add the lang to the page <html> and to the url.

Learn more about Tips and Use Cases.

/**
 * Handle all the changes needed for the translations
 *  - Lang selector
 *  - Add ?lang={lang} to URL Parameters
 *  - Call TwoMi18n function
 *
 * @param lang
 */
function handleTanslation(lang) {
    if (lang === "en") {
        buttonEN.setAttribute("disabled", true);
        buttonFR.removeAttribute("disabled");


        window.history.replaceState("lang", null, "?lang=en");
    } else if (lang === "fr") {
        buttonEN.removeAttribute("disabled");
        buttonFR.setAttribute("disabled", true);


        window.history.replaceState("lang", null, "?lang=fr");
    }


    //Set <html> lang (Used as a signal for translation for other javascript tags)
    document.documentElement.lang = lang;


    changeLinkLangParam(lang);
    twoMi18n.translateHTML(lang);
}

You can find this working example here.

Other Frameworks

Section titled “Other Frameworks”

I haven’t been able to test the library with other frameworks since I’m not really familiar with any of those. However, you can take inspiration from the examples above.

Feel free to test it yourself and contact me if you need help, or add a section to this documentation if you implement it in another Javascript Frameworks.