# gt-react: General Translation React SDK: derive
URL: https://generaltranslation.com/en-GB/docs/react/api/strings/derive.mdx
---
title: derive
description: API reference for the derive() string function
---

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


## Overview

The `derive` function allows static function calls or variable expressions within a string translation.
This is useful for writing reusable code, internationalising fragmented sentences, and preserving word agreement.

```jsx
const getDisplayName = (condition) => {
  return condition ? "User" : 'Admin';
};

gt(`${derive(getDisplayName(condition))} says hello.`);
// Creates two translation entries:
// "User says hello." -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

This works by generating distinct translations for each possible outcome, helping to preserve word agreement, conjugation and changes in word order across languages.

<Callout>
  **Multiple translation entries:**
  `derive` creates separate translation entries for each possible outcome of the wrapped function, which can significantly increase the number of translations.
  Use this feature judiciously and prefer ICU select statements when the multiplication factor becomes excessive.
</Callout>

<Callout>
  **Static analysis:**
  `derive` can only analyse content that is known at build time.
  Any dynamic content (variables, API calls, etc.) must be wrapped with `declareVar`.
</Callout>

## Reference

### Parameters

| Name      | Type                                                         | Description                                               |
| --------- | ------------------------------------------------------------ | --------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | A static function call that returns translatable content. |

### Returns

Returns `content` of type `T`.

***

## Behaviour

### Build-time analysis

During the build process, the CLI tool:

1. Analyses the function wrapped by `derive`
2. Determines all possible return values of the function (these must be statically analysable at build time)
3. Creates separate translation entries for each unique outcome

### Performance considerations

Like `<Derive>`, `derive` multiplies translation entries.
Each function call with multiple outcomes creates separate translations, and multiple `derive` calls in the same string multiply the total number of entries exponentially.

***

## Example

### Reusable content

You can use `derive` to handle fragmented sentences or to create reusable content with function calls.

```jsx copy
import { derive, gt } from 'gt-react';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Fragmented sentences

You can use `derive` to handle fragmented sentences with function calls.

```jsx copy
import { derive, gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```


### Agreement

Without `derive`, translating agreement is syntactically cumbersome.
You have to add a select statement to handle agreement (plurality, gender, etc.).
Then, you must also enumerate every possible outcome.

```jsx copy
import { gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

With `derive`, agreement becomes trivial.
No select statement is required, nor do you need to specify every outcome.

```jsx copy
import { derive, declareVar, gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```

Using `derive`, the CLI tool identifies that `getSubject` has two possible outcomes and creates a translation entry for each one.
This handles agreement automatically.

* &quot;The boy is playing&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;The girl is playing&quot; -&gt; &quot;*La* niña está jugando&quot;


### With variables

You can combine `derive` with `declareVar` for dynamic content.

```jsx copy
import { derive, declareVar, gt } from 'gt-react';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```


### Complex functions

Functions can contain multiple conditional branches and return statements.

```jsx copy
import { derive, gt } from 'gt-react';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```


### Inline expressions and logic

You can embed logic directly inside the `derive` call.

```jsx copy
import { derive, gt } from 'gt-react';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

***


## Notes

* Use `derive` judiciously, as it can exponentially increase translation entries
* All possible outcomes must be statically analysable at build time
* Variables within static functions should be wrapped with `declareVar`

## Next steps

* See [`declareVar`](/docs/react/api/strings/declare-var) for marking dynamic content within static functions
* See [`decodeVars`](/docs/react/api/strings/decode-vars) for extracting original values from declared variables
* See [`<Derive>`](/docs/react/api/components/derive) for the JSX equivalent
* Read the [release notes](/devlog/gt-next_v6_12_0) for more information