# General Translation React SDKs (gt-react, gt-next): Branch
URL: https://generaltranslation.com/en-GB/docs/react/reference/components/branch.mdx
---

title: Branch
description: Render content conditionally based on a value with General Translation gt-react. API reference for Branch.

---

The `<Branch>` component adds conditional logic to a translation. You pass a value to `branch`, and it renders the matching child prop.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

## Overview [#overview]

Provide a `branch` value and a child prop for each possible value.

```tsx
<Branch
  branch={status}
  active={<p>The user is active.</p>}
  inactive={<p>The user is inactive.</p>}
/>
```

*Note: place `<Branch>` inside a [`<T>`](/docs/react/reference/components/t) to translate the branches, and wrap any dynamic values within them in a variable component such as [`<Var>`](/docs/react/reference/components/var).*

## How it works [#how-it-works]

* **Value matching.** The `branch` value is matched against the prop keys you provide. The matching prop&#39;s content renders.
* **Fallback.** When `branch` is omitted, or its value does not match any prop key, `children` renders as a fallback. `<Branch>` never throws.

## Props [#props]

| Prop                    | Description                              | Type                          | Optional | Default |
| ----------------------- | ---------------------------------------- | ----------------------------- | -------- | ------- |
| [`branch`](#branch)     | The value that selects the content.      | `string \| number \| boolean` | Yes      | —       |
| [`children`](#children) | Fallback content when no branch matches. | `ReactNode`                   | Yes      | —       |
| [`[value]`](#value)     | Content for a specific branch value.     | `ReactNode`                   | Yes      | —       |

### `branch` [#branch]

**Type** `string | number | boolean` · **Optional**

The value used to select which branch renders. When `branch` is omitted or its value does not match any branch prop key, `children` renders as the fallback instead.

### `children` [#children]

**Type** `ReactNode` · **Optional**

Fallback content rendered when no branch prop matches the `branch` value.

### `[value]` [#value]

**Type** `ReactNode` · **Optional**

A prop for each possible branch value. Each key corresponds to a value of `branch`, and its content renders when that value is matched. A string is accepted in place of JSX.

## Examples [#examples]

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // a plain string also works
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```

```tsx title="BranchExample.tsx"
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] fallback
    </Branch>
  );
}
```

```tsx title="BranchExample.tsx"
import { T, Branch, Var } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <T>
      <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 [#notes]

* Branch keys can be any string value that matches the `branch` prop, making `<Branch>` adaptable to many use cases.
* Combine `<Branch>` with [`<T>`](/docs/react/reference/components/t) and [variable components](/docs/react/guides/formatting-variables) for translated, dynamic content.
* For count-based content, use [`<Plural>`](/docs/react/reference/components/plural).