The best solution for internationalizing (i18n) React apps from Swedish to Swahili

How it works

Install the TacoTranslate package via npm:

npm install tacotranslate

When you’ve got the module installed, you’ll need to create a TacoTranslate account, a translation project, and associated API keys. Create an account here. It’s free, and doesn’t require you to add a credit card.

Within the TacoTranslate application UI, create a project, and navigate to its API keys tab. Create one read key, and one read/write key. We’ll save them as environment variables. The read key is what we call public and the read/write key is secret. For example, you could add them to a .env file in the root of your project.

You’ll also need add two more environment variables: TACOTRANSLATE_DEFAULT_LOCALE and TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: The default fallback locale code. In this example, we’ll set it to en for English.
• TACOTRANSLATE_ORIGIN: The “folder” where your strings will be stored, such as the URL of your website. Read more about origins here.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Be sure to never leak the secret read/write API key to client side production environments.

Setting up TacoTranslate

Initialize TacoTranslate in your React application by wrapping your application in the TacoTranslate context provider:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

You can now use the Translate component anywhere within your application to display translated text! Be sure to check out our documentation for more information, and for implementation guides specific to your setup.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Benefits of using TacoTranslate

• Time saving: Automates the tedious process of localization and collecting strings, saving you valuable time.
• Cost-effective: Reduces the need for manual translations, lowering your localization costs.
• Improved accuracy: AI-powered translations ensure contextually accurate and high-quality results.
• Scalable Solution: Easily add support for new languages as your application and customer base grows.

Get started today!

Your React application will be translated automatically when you add any strings to a Translate component. Note that only environments with read/write permissions on the API key will be able to create new strings to be translated.

We recommend having a closed and secured staging environment where you can test your production application, adding new strings before going live. This will prevent anyone anyone from stealing your secret API key, and potentially bloating your translation project by adding rogue strings.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from any language. Translate for free!