DEV Community

Cover image for How I Localized My React App Without Managing i18n Files
Gennaro
Gennaro

Posted on

How I Localized My React App Without Managing i18n Files

You ever start something simple and then realize you’ve opened a giant can of config worms? That was me. I just wanted to support two languages in my React app. Thought I’d slap on i18next or some other lib and be done.

Nope.

Suddenly I was knee-deep in translation files, context providers, hooks, loading JSON over the network—felt like I was scaffolding a whole extra app just to say “Hello” in Hindi.

So I went looking for something easier. Found AutoLocalise.

Why I Gave It a Shot

  • No translation files.
  • No i18n boilerplate.
  • Claims to work in React/React Native/Expo.

I was skeptical. But config it was dead simple:

npm install react-autolocalise
Enter fullscreen mode Exit fullscreen mode

Then I tried this:

import React from "react";
import { TranslationProvider, useAutoTranslate } from "react-autolocalise";

// Component that uses translation
function TranslatedContent() {
  const { t } = useAutoTranslate();
  return <h1>{t("Hello!")}</h1>;
}

// Application wrapper with TranslationProvider
export function TestApp() {
  return (
    <TranslationProvider
      config={{
        apiKey: "your-api-key",
        sourceLocale: "en",
        targetLocale: "hi",
      }}
    >
      <TranslatedContent />
    </TranslationProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

I hit refresh. “Hello!” became “नमस्ते!” Just like that. No config, no JSON.

What Surprised Me

  • Translations are instant (real-time API).
  • No syncing or uploading files.
  • Supports over 100 languages.

It uses your source language (in my case, English) and translates everything on the fly into your target language. You just mark the text with t("...").

What It’s Not

It’s not a drop-in replacement for huge enterprise i18n setups with custom contexts, plural forms, or self-hosted translations. But for 90% of dev projects? I believe this is refreshing.

TL;DR

If you want to localize a React app without translation files, AutoLocalise saved me hours, might be yours as well. It’s not magic, but it felt pretty close.

Hope this helps someone avoid the same rabbit hole I fell into.

Top comments (0)