<Branch>

Overview

The <Branch> component allows you to 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 this gets matched with 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

JSX.Element containing the content corresponding to 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 have 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 have 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 light.</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 in the middle.</p>}
      blonde={<p>Their hair is light.</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-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 light.</p>}
      >
        <p>Their hair 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 in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Notes

• The keys for branches can be any string value 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 and localized interfaces.

Next steps

• For more advanced usage and examples, refer to Using Branching Components.
• To learn more about variable components like <Currency>, <DateTime>, <Num>, and <Var>, see the Using Variable Components documentation.