React i18n without translation keys

Most React i18n libraries work with translation keys. You replace each piece of text in your app with a key, keep a translation file for each language, and look up the right text at runtime. With Magic Translate, you write your text in your own language, and AI translates it when the page is shown.

How i18n with translation keys works

With a key-based library, a simple button looks like this:

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

Each new piece of text needs a key and a translation in every language file. When you change the English text, the other languages are out of date until someone updates the translations.

The same button without keys

With Magic Translate, the text stays where it is:

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

There are no language files to maintain. When you change the text, the new version is translated the next time it is shown, and the translation is cached from then on.

Getting started

1. Sign up for Magic Translate and get your API key. The free plan includes 5,000 characters per month.
2. Install the client and wrap your app in the MagicTranslateProvider, as shown in the React guide.
3. Wrap your text in <T>. For props and attributes, use the useT hook.

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

If you render on the server, use React SSR instead, so search engines and users get fully translated HTML.

When translation keys are still the better choice

AI translation is good, but it is not reviewed by a person. If every word of your app must be approved by a translator, for example for legal or medical texts, a key-based library with human translations gives you that control. Many apps combine both: Magic Translate for most of the interface, and reviewed texts where it matters.

Frequently asked questions

Is the translation fast enough?

The first translation can take a few seconds. After that, it is cached and takes 100 to 300 ms. With React SSR, translations happen on the server, so users receive an already translated page.

What does it cost?

Usage is counted in translated characters per month, and text that was already translated is not counted again. See how usage is calculated and the pricing.

Which languages are supported?

Over 70. See the full list of supported languages.