Translate Your Application

This guide will help you quickly implement AutoLocalise in your application. We'll cover the basics of marking text for translation.

Prerequisites

Before you begin, make sure you have:

1. Installed the AutoLocalise SDK (see Installation)
2. Initialized the SDK with your API key (see Initialization)

Marking Text for Translation

To mark text for translation, use the t() method from the translation hook:

Import the useAutoTranslate hook

React

import { useAutoTranslate } from "react-autolocalise";

React Native/Expo

import { useAutoTranslate } from "react-native-autolocalise";

Wrap the text for translation

function MyComponent() {
  const { t } = useAutoTranslate();

  // Simple translation
  const title = t("Welcome to our app!");

  // Translation with variables
  const greeting = t("Hello, {{1}}!").replace("{{1}}", userName);

  return (
    <div>
      <h1>{title}</h1>
      <p>{greeting}</p>
    </div>
  );
}

Nested formatting

React:

import React from "react";
import { FormattedText } from "react-autolocalise";

const MyComponent = () => {
  return (
    <div>
      <FormattedText>
        <p>
          Hello, we <div style={{ color: "red" }}>want</div> you to be{" "}
          <span style={{ fontWeight: "bold" }}>happy</span>!
        </p>
      </FormattedText>
      <FormattedText persist={false}>
        Hello,
        <p style={{ color: "red" }}>World</p>
      </FormattedText>
    </div>
  );
};

React Native / Expo:

import { Text, View } from "react-native";
import { FormattedText } from "react-native-autolocalise";

const MyComponent = () => {
  return (
    <View>
      <FormattedText>
        <Text>
          Hello, we <Text style={{ color: "red" }}>want</Text> you to be{" "}
          <Text style={{ fontWeight: "bold" }}>happy</Text>!
        </Text>
      </FormattedText>
      <FormattedText persist={false}>
        Hello,
        <Text style={{ color: "red" }}>World</Text>
      </FormattedText>
    </View>
  );
};

Managing Translations

All translations are managed through the AutoLocalise Dashboard. You don't need to extract strings or manage locale files. When you use a new text string in your code with the t() function and not setting persist to false, it will automatically appear in the dashboard with translated text when your client start accessing it.

Persist for Editing

The persist means the string will be persisted so that you can review and edit in the dashboard, default is true, if the content is dynamic or you don't want us to store it, set it 'false'.

import { useAutoTranslate } from "react-native-autolocalise";
const MyComponent = () => {
  const { t } = useAutoTranslate();
  return (
    <div>
      <h1>{t("Welcome to our app!", false)}</h1>
    </div>
  );
};

Next Steps

Now you're ready to start localizing your application for users around the world. Login the Dashboard to check your translation result