Variables

Variables represent a piece of the message that is dynamic, and therefore, should be replaced with a value at runtime. In Terai, you can use the ${variable} syntax to define variables in your translations. Handling variables is often one of the most challenging aspects when working with translation libraries. Terai takes a specific stance on this by not natively supporting variable-related functionalities such as gender and pluralization.

A variable is not translated, though you could use an already translated message.

Basic Usage

String Interpolation

The most common use case for variables is string interpolation. This is the process of replacing placeholders in a string with actual values. Here's an example:

import { useTs } from '@terai/react'
 
export function Example() {
  const { ts } = useTs()
  const name = 'world'
 
  return (
    <div>
      <p>{ts`Hello, ${name}!`}</p>
    </div>
  )
}

Composition

To compose multiple translations together, you can use variables to nest them within each other. Each ts call represents an atomic message that should be translated independently.

Here's an example:

import { useTs } from '@terai/react'
 
type MailBoxProps = {
  name: string
  messages: string[]
}
 
export function MailBox({ name, messages }) {
  const { ts } = useTs()
  const inboxMsg = getInboxMsg()
 
  function getInboxMsg() {
    if (!messages.length) return ts`your inbox is empty`
    if (messages.length === 1) return ts`you got one message in your inbox`
    return ts`you got ${messages} messages in your inbox`
  }
 
  // Expected output:
  // "Hello John, your inbox is empty" || "Hello John, you got 10 messages in your inbox"
 
  return (
    <div>
      <p>{ts`Hello ${name}, ${inboxMsg}`}</p>
    </div>
  )
}

Using composition in your messages opens the door for developers to create complex messages that can suit most use cases.