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

title: "<Branch>"
description: Render content conditionally based on a value. API reference for the <Branch> component.

---

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`.*

## 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 dynamic values inside 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'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 per 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]

*Examples import from `gt-react`; import from your framework's package instead.*

```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>}
    >
      {/* [!code highlight] */}
      <p>Their hair is unknown.</p>
    </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>}
      >
        {/* [!code highlight] */}
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </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).