---
# System prepended metadata

title: Interpolate with data
tags: [brew-js-react]

---

---
tags: brew-js-react
---

# Interpolate with data

Translate callback use [waterpipe](https://github.com/misonou/waterpipe) as template engine under the hood when supplied with data.

```typescript
const resources = {
    en: {
        prefix: { key: 'The value is {{value}}' }
    }
};

const { translate, useTranslation } = makeTranslation(resources, 'en');

function Component() {
    const { t } = useTranslation('prefix');
    return (
        <div>{t('key', { value: 1 })}</div>
    );
}
```

would render:

```htmlembedded
<div>The value is 1</div>
```