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

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:

<div>The value is 1</div>