Overview

The <Branch> component lets you add conditional logic to a translation.

const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>

You pass a value to the branch parameter, and it’s matched to an output value based on the keys you provide.

Reference

Props

The [key]: string syntax indicates arbitrary keys representing potential branches. For example, branches like active and inactive can be added as parameters.

Returns

A JSX.Element that contains the content for the specified branch, or the fallback content.

Throws

Error if the branch prop isn’t provided or is invalid.

Examples

Basic usage

<Branch> must produce a different output for each possible value of the branch prop.

In this example, the user.hairColor value is used to determine the output. We’ve defined the props black, brown, and blonde to match the possible values of user.hairColor.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown="Their hair is mid‑brown." // (you can pass a string if you prefer)
      blonde={<p>Their hair is fair.</p>}
    />
  );
}

Fallback content

The children will always be used as a fallback if no prop matches the value passed to branch.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is medium.</p>}
      blonde={<p>Their hair is fair.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}

Translating <Branch>

If you want to translate the content, simply wrap it in a <T> component.

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is medium.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p> 
      </Branch>
    </T> 
  );
}

Adding variables

If you want to render dynamic values in the branch, make sure you wrap them in <Currency>, <DateTime>, <Num>, or <Var> components.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is medium.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair colour: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Notes

• Branch keys can be any string that matches the branch prop. This flexibility makes it easy to adapt <Branch> to a wide range of use cases.
• Combine <Branch> with other components, such as <T> for translations and variable components for dynamic content, to create rich, localised interfaces.

Next steps

• For more advanced usage and examples, see Using Branching Components.