Dynamic Content

Overview

Dynamic Content is generally any content that can change based on the user, context, environment, etc. This exists in contrast to Static Content, which remains the same regardless of the user, context, environment, etc.

"To Tx or not to Tx"

Sometimes, we want to translate dynamic content, but other times we want it to remain the same.

A good example would be a user's email address or name. Another example might be a bank account balance or a user's SSN. Such items are (1) not likely to need translation when your app is being rendered in a different language and (2) can vary (in this case between each user).

Example

import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            Hello, <Var>{name}</Var>!
        </T>
    );
}

As far as translation goes this has two benefits:

1. You do not have to create a translation for every possible name.
   • Using <Var>, we only generate one translation that essentially would look like this:
     • `¡Hola, ${name}!`
   • If we do not use <Var>, we would have to perform an on-demand translation for every unique name:
     • "¡Hola, Alice!", "¡Hola, Bob!", "¡Hola, Charlie!", "¡Hola, David!", ...
2. You also don't have to worry about the names themselves changing into a translated form of their name: (i.e. "¡Hola, Alicia!", "¡Hola, Roberto!", ...).

As you can see, the <Var> component should be used to wrap any contents that should remain the same regardless of locale. This way, we avoid the need to create translations for every possible value of the dynamic content.

By wrapping private information in a <Var> component, you can ensure that the information is not sent to the General Translations API.