Logo

dev-resources.site

for different kinds of informations.

Even a mouse can do i18n

Published at
10/17/2024
Categories
javascript
toglee
react
i18n
Author
ashishk1331
Categories
4 categories in total
javascript
open
toglee
open
react
open
i18n
open
Author
11 person written this
ashishk1331
open
Even a mouse can do 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!

I will not use spreadsheets for my app localization

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[];
}

Enter fullscreen mode Exit fullscreen mode

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",
    ...
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>;
}

Enter fullscreen mode Exit fullscreen mode

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.

App

By gluing all the pieces together, you create a minimal app that displays country flags based on user input.

Preview of the app

Jam[Demo]: https://jam.dev/c/ce894e33-d81a-4b93-9400-9bb97a5352c1
Repo: https://github.com/ashishk1331/tolgee-platform/tree/flag-emoji-converter-ashish/demos/flag-emoji-converter

If you have any questions or if there's something I missed including, feel free to ping me in the comments!

i18n Article's
30 articles in total
Favicon
Integration for FormatJS/react-intl: Automated Translations with doloc
Favicon
Introducing date-formatter-i18n: Simplify i18n for Dates in JavaScript
Favicon
Implementing i18n in Next.js - A Complete Guide to next-intl with App Router
Favicon
Integration for Angular: Automated Translations with doloc
Favicon
I18n vue
Favicon
Automating i18n Localization with AI: The Prismy Approach
Favicon
Integrating and storing the selected user language into the database in a full-stack application on "Angular" and "NestJS"
Favicon
πŸŽ„ Instant Local Translation with Chrome 🌐
Favicon
ICU vs. i18next: Choosing the Right Format for Your Localization Needs
Favicon
LiveCodes Gets a Fresh Look, and Goes Multilingual!
Favicon
A Modern Approach to Software Localization (2024)
Favicon
Pseudolocalization in Phoenix with gettext_pseudolocalize
Favicon
Launching YAMLFish, a simple translations management tool
Favicon
Mastering RTL with One Line of CSS (No Libraries Needed!) πŸš€
Favicon
Auto-Detect RTL in React with TypeScript! 🌐
Favicon
Is Your CSS Logical?
Favicon
Automation and branches- Using YAMLFish to easily manage I18n translations in your project
Favicon
The basics - Using YAMLFish to easily manage I18n translations in your project
Favicon
App Localization with doloc
Favicon
Software Localization Checklist
Favicon
Maneira simples de adicionar suporte a i18n no Rust com exemplos e testes
Favicon
Manera simple de agregar soporte i18n en Rust con ejemplos y pruebas
Favicon
Simple way to make i18n support in Rust with with examples and tests
Favicon
Reliable date formatting in Next.js
Favicon
Even a mouse can do i18n
Favicon
A Simple Way to Handle Locale-Specific URLs in Express
Favicon
Wagtail programmatically create page translation
Favicon
I18n Localization for Nuxt.js ! Implement multi-language support to website.
Favicon
Simplify Localization
Favicon
Comparing Language Detection Libraries (& API) Using Java/ColdFusion/CFML

Featured ones: