Using Translations in Doc Pages

Last Updated   March 29, 2025

Guide

This document is relevant when you are building new components or expanding existing ones. It is not used for translating the documentation pages themselves.

See Translating Documentation Guide for more information on how to translate documentation pages.

Using Translations in React Components

When using translations in React components, you can use the useTranslation utility function from @/lib/utils to translate strings. This function takes a string as an argument and returns the translated string based on the provided locale.

Currently, translations must be defined in the src/content/docs/{LANG}/ui.json file, where {LANG} is the language code for the translation.

Basic Example

import React from "react";
import { useTranslation } from '@/lib/utils';

const MyComponent = () => {
  return (
    <div>
      <h1>{useTranslation('pages.api.disclaimerBanner.title', locale)}</h1>
    </div>
  );
};

Using Dynamic Tokens

You can also use dynamic tokens in a translation string.
However, the returned string will need to be sanitized before being rendered.

Example

import {URLS} from "@/Consts";
import {useTokenTranslation} from "@/lib/utils.ts";
import DOMPurify from "dompurify";
import React from "react";

const MyComponent = (locale: string = 'en') => {
    const disclaimerText: string | Node = useTokenTranslation('pages.api.disclaimerBanner.title', locale, {
        "a": (chunks: any) => {
            return `<a href=${URLS.API_DISCORD}
                   target="_blank" rel="noreferrer noopener">{chunks}</a>`
        }
    });

    const sanitizedText = () => ({
        __html: DOMPurify.sanitize(disclaimerText)
    });

    return (
        <div>
            <h1>{sanitizedText()}</h1>
        </div>
    );
};