The best solution for internationalizing (i18n) React apps from Albanian to Gujarati
Are you looking to expand your React application to new markets? TacoTranslate makes it incredibly easy to localize your React apps, enabling you to reach Gujarati speaking audiences without the hassle.
Why choose TacoTranslate for React?
- Seamless Integration: Designed specifically for React applications, TacoTranslate integrates effortlessly into your existing workflow.
- Automatic String Collection: No more manually managing JSON files. TacoTranslate automatically collects strings from your codebase, and translates them from Albanian to Gujarati.
- AI-Powered Translations: Leverage the power of AI to provide contextually accurate translations that fit the tone of your application.
- Instant Language Support: Add support for new languages with just a click, making your application globally accessible.
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 toen
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!