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 such as active and inactive can be added as parameters.

Returns

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

Throws

Error if the branch prop is not provided or is invalid.

Examples

Basic usage

<Branch> needs to 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 props black, brown, and blonde to match the possible values of user.hairColor.

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} 
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (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-react';

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

Translating <Branch>

To translate the content, simply wrap it in a <T> component.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is fair.</p>}
      >
        <p>Their hair colour is unknown.</p> 
      </Branch>
    </T> 
  );
}

Adding variables

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

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

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> // [!code highlight]
      </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.