Installation

Overview

Intl serves as a data management tool for internationalization frameworks (i18next, more to come). Once the project is setup, you will be able to manage UI copy on the fly in your native language, and translate into any langauge of your choosing. By giving the context for any phrase, our AI models will adjust language output to meet your criteria.

Getting Started

Dependencies

The following packages or frameworks are required:

node (v10+)
npm or yarn

Updating The Code

For this exmaple, lets assume the integration of i18next:

npm install react-i18next i18next --save

Go to your project landing page at https://translate.taskgraph.io/home (opens in a new tab), and copy the 'Project Link'.

Below is an example template of an i18next configuration. Click the 'Project Link' button to copy, and paste the URL in TRANSLATE_URL.

import i18next from "i18next";
import HttpBackend, { HttpBackendOptions } from "i18next-http-backend";
import ICU from "i18next-icu";
import { initReactI18next } from "react-i18next";

const i18n = i18next
    .use(ICU)
    .use(HttpBackend)
    .use(initReactI18next)
    .init<HttpBackendOptions>({
        backend: {
            loadPath: {TRANSLATE_URL},
        },
        debug: true,
        fallbackLng: "en-US",
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default,
        },
        // react i18next special options (optional)
        react: {
            bindI18n: "languageChanged loaded",
            nsMode: "default",
        },
    });

export default i18n;

In the root of your frontend application, import the config file. In this example, we are assuming react, so import the i18n.ts file into app.tsx.

app.tsx

import "./i18n.ts"
...
...

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <div>Hello, world!</div>
  );
}

Start integration your translation library into UI elements.

import { useTranslation } from 'react-i18next';

const Page = () => {
    const { t } = useTranslation();

    return (
        <div>
            { t("example.hello") }
        </div>
    )
}

Now, you are ready to internationalize your products on the fly!

Managing Translations

Overview Advanced