# gt-react: General Translation React SDK: Derive
URL: https://generaltranslation.com/en-GB/docs/react/api/components/derive.mdx
---
title: Derive
description: API reference for the Derive component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<Derive>` component is used to handle sentence fragmentation and reusable content without sacrificing word agreement, conjugation, or changes in word order.
In the following example, two separate translations are created: &quot;The beautiful boy plays with the ball&quot; and &quot;The beautiful girl plays with the ball&quot;.

```jsx
function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

<T>
  The beautiful <Derive>{getSubject(gender)}</Derive> plays with the ball.
</T>;
```

The `<Derive>` component tells the CLI tool to dereference a function call and catalogue all possible content returned by that function, treating each return statement as if it were wrapped in a `<T>` component.

<Callout>
  **Advanced Usage:**
  The `<Derive>` component is an advanced feature and should be used with caution, as it can generate surprisingly large numbers of translation entries.
  Furthermore, `<Derive>` imposes a strict requirement that all possible content permutations must be statically analysable.
</Callout>

For more information, see the release notes for [gt-next@6.8.0](/devlog/gt-next_v6_8_0).

***


## Reference

### Props

<TypeTable
  type={{
  children: {
    type: 'function invocation',
    optional: false,
  },
}}
/>

### Description

| Prop       | Description                                                           |
| ---------- | --------------------------------------------------------------------- |
| `children` | Static content. The CLI tool will analyse all possible return values. |

### Returns

`React.JSX.Element` containing the rendered content from the function call, with each possible outcome creating a separate translation entry.

***

## Behaviour

### Build-time analysis

During the build process, the CLI tool analyses the children of `<Derive>` components and creates separate translation entries for each possible outcome.
This enables proper grammatical agreement and word order across different languages.

### Requirements

The children of `<Derive>` components must be determinable at build time. The supported syntax includes:

* String, number and boolean literals
* JSX expressions with nested `<Derive>` and `<Var>` components
* Ternary operators
* Function invocations (that have statically analysable outcomes)

***

## Examples

### Basic usage

Use `<Derive>` to handle dynamic content that affects sentence structure.

```jsx title="BasicExample.jsx" copy
import { T, Derive } from 'gt-react';

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
    </T>
  );
}
```

This creates two translation entries:

* &quot;The boy is beautiful&quot;
* &quot;The girl is beautiful&quot;


### With function invocations

Use `<Derive>` to handle dynamic content from a function invocation when it affects sentence structure.

```jsx title="BasicExample.jsx" copy
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{getSubject(gender)}</Derive> is beautiful.
    </T>
  );
}
```


### With variables

Combine `<Derive>` with `<Var>` for dynamic content within static function returns.

```jsx title="WithVariables.jsx" copy
import { T, Derive, Var } from 'gt-react';


function getTitle(title) {
  return title === 'Mr.' ? 'Mr.' : 'Ms.';
}

function getGreeting(title) {
  return (
    <>
      Hello, <Derive>{getTitle(title)}</Derive>. How are you, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Derive>{getGreeting(title)}</Derive>
    </T>
  );
}
```


### Multiple Derive components

Be careful when using multiple `<Derive>` components, as they multiply translation entries.

```jsx title="MultipleDerive.jsx" copy
import { T, Derive } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function getObject(toy) {
  return toy === 'ball' ? 'ball' : 'crayon';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Derive>{getSubject(gender)}</Derive> plays with the{' '}
      <Derive>{getObject(toy)}</Derive>.
    </T>
  );
}
```

This creates four translation entries (2 × 2 combinations):

* &quot;boy plays with the ball&quot;
* &quot;boy plays with the crayon&quot;
* &quot;girl plays with the ball&quot;
* &quot;girl plays with the crayon&quot;


### Supported function syntax

```jsx title="SupportedSyntax.jsx" copy
function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return 'The boy';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          Hello, <Derive>{getTitle(title)}</Derive>. How are you,{' '}
          <Var>{name}</Var>?
        </>
      );
    case 'ternary':
      return condition ? 'The boy' : 'The girl';
    case 'function_calls':
      return otherStaticFunction();
  }
}
```

***


## Limitations

### Performance impact

Using `<Derive>` can result in exponential growth in translation entries.
Each additional `<Derive>` component multiplies the total number of translations.

### Variable content

Any dynamic or variable content within static function returns must be wrapped in `<Var>` components.

```jsx
// Correct
function getContent() {
  return (
    <>
      Hello, <Var>{userName}</Var>!
    </>
  );
}

// Incorrect - will cause build errors
function getContent() {
  return <>Hello, {userName}!</>;
}
```

***


## Notes

* The `<Derive>` component is designed to handle sentence fragmentation while maintaining grammatical accuracy across languages.
* Always consider the performance implications of using multiple `<Derive>` components in a single translation.
* Treat every return statement in static functions as though it were wrapped in a `<T>` component.
* Use `<Derive>` judiciously - prefer simpler translation structures where possible.

## Next steps

* For variable content within translations, see the [`<Var>`](/docs/react/api/components/var) component.
* For the main translation component, see [`<T>`](/docs/react/api/components/t).
* For the string equivalent of `<Derive>`, see [`derive`](/docs/react/api/strings/derive).