Even a mouse can do i18n

#javascript #toglee #react #i18n

Introduction

The mouse saga began when I was searching for repositories to contribute to and discovered Toglee. So, what is Toglee?

Toglee is a localization platform that enables you to translate your application into any language without altering your code.

In simple terms, it facilitates adding local language support to your webpages. The best part is that it also supports machine translations, in-context translations, and manages cache to avoid unnecessary re-translations. Plus, the alt + click feature for translations is incredibly convenient!

Let’s understand Toglee by creating an app that utilizes its features.

Task

Creating a minimal app that convert country names into their respective flag emojis. Users can type a country name and see the corresponding flag emoji.

Process

Reading the prompt instantly sparked an idea for an app where users can see the flags of all countries that share the same prefix as the country name they are typing. For example, if the user types ind, they will see the flags of both India and Indonesia. We can implement this functionality using a simple Trie data structure to store the names of all countries and return the flags of countries with matching prefixes.

Sounds cool, right? It is. 😄

1. Setup

Toglee provides bootstrapped templates to get started, and for this example, I chose the React + ViteJS template. Check the integrations page for more information.
Also, you can follow the Youtube video to setup toglee correctly.

For this project, I didn’t want to waste time perfecting the styles and UI, so I chose Pico CSS to style the app.
"Keep it simple!", they say.

2. Trie

Jumping straight to the point, I created the CountryTrie class to store country names, where each leaf node contains the country code for the fully spelled country.
Read about Tries.

abstract class AbstractCountryTrie {
    children: Record<string, AbstractCountryTrie>;
    countryCode: string;
    isCountry: boolean;

    constructor() {
        this.children = {};
        this.countryCode = "";
        this.isCountry = false;
    }

    // Inserts a country name and its corresponding country code into the trie.
    abstract insert(name: string, code: string): void;

    // Searches for a country by its name and returns the country code.
    abstract search(name: string): string;

    // Finds the best matches for a country based on a partial input.
    abstract bestFind(name: string): string[];
}

The input data is stored as a key-value JSON, where each country name corresponds to its country code. The entire list can be found in the file located at /src/assets/countries.json.

{
    "ascension island": "ac",
    "andorra": "ad",
    "united arab emirates": "ae",
    "afghanistan": "af",
    ...
}

Then, inside the FindCountry component, we create an instance of CountryTrie and populate it with the country names. This same instance will be used to search for countries.

import countries from "../assets/countries.json";
import { CountryTrie } from "../util/countryTrie";

const trie = new CountryTrie();
for (let [country, code] of Object.entries(countries)) {
    trie.insert(country, code);
}

3. Country Flags

The country flags are fetched from the beautiful library flag-icons. With this library, we can easily display flags by adding the class fi or fib to an empty div.

<div className="flag-container">
    {trie.bestFind(countryName).map((code) => (
        <div key={code} className={`flag fib fi-${code}`} />
    ))}
</div>

4. Toglee

Lastly, the star of the show tonight: all labels in the app are rendered using the useTranslate hook from @tolgee/react. Toglee offers on-the-fly translation support, even in production, allowing you to add language translations to labels simply by alt clicking on them.

import { useTranslate } from "@tolgee/react";

export default function Description() {
    const { t } = useTranslate();

    return <p>{t("app-description")}</p>;
}

Later, you can add local-first support for translations by pulling in the translations using the Toglee CLI. Or even better, you can use machine translations to avoid the manual work.