React i18n without translation keys

Most React i18n libraries work with translation keys. You replace every text in your app with a key, keep a file of translations for each language, and look up the right text at runtime. Magic Translate skips all of that: you write your text in your own language, and it is translated 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>

Every new text means a new key, an entry in every language file and a translation for each language. When you change the English text, the other languages are out of date until someone translates them again.

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

Machine 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 of a text 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 never wait for them.

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.