Overview

Dynamic content is any content that can change based on the user, context, environment, etc. This contrasts with 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 at 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) unlikely to need translation when your app is 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 would essentially 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 translated forms of the names (i.e. "¡Hola, Alicia!", "¡Hola, Roberto!", ...).

As you can see, the <Var> component should be used to wrap any content 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.