useTranslate is a React hook that provides translation functionality for your Refine application. It returns a translate function that retrieves translations from your configured i18n provider.
Usage
import { useTranslate } from "@refinedev/core";
const MyComponent = () => {
const translate = useTranslate();
return (
<div>
<h1>{translate("pages.login.title")}</h1>
<p>{translate("pages.login.description", "Welcome back!")}</p>
</div>
);
};
Return Value
The hook returns a translate function with the following signatures:
The translate function that returns translated strings.Signature 1: With Options
Signature 2: Without Options
Returns: string - The translated text Examples
Basic Translation
import { useTranslate } from "@refinedev/core";
const MyComponent = () => {
const translate = useTranslate();
return (
<div>
<h1>{translate("dashboard.title")}</h1>
<p>{translate("dashboard.welcome")}</p>
</div>
);
};
Translation with Default Message
import { useTranslate } from "@refinedev/core";
const MyComponent = () => {
const translate = useTranslate();
return (
<h1>
{translate("pages.home.title", "Welcome to our application")}
</h1>
);
};
Translation with Interpolation
import { useTranslate } from "@refinedev/core";
const MyComponent = () => {
const translate = useTranslate();
const userName = "John Doe";
return (
<p>
{translate(
"messages.greeting",
{ name: userName },
"Hello, {{name}}!"
)}
</p>
);
};
import { useTranslate } from "@refinedev/core";
const LoginForm = () => {
const translate = useTranslate();
return (
<form>
<label>{translate("form.email", "Email")}</label>
<input type="email" placeholder={translate("form.emailPlaceholder")} />
<label>{translate("form.password", "Password")}</label>
<input type="password" />
<button type="submit">
{translate("buttons.login", "Login")}
</button>
</form>
);
};
Translating Resource Names
import { useTranslate } from "@refinedev/core";
const ResourceList = () => {
const translate = useTranslate();
return (
<div>
<h2>{translate("posts.posts", "Posts")}</h2>
<h2>{translate("users.users", "Users")}</h2>
<h2>{translate("categories.categories", "Categories")}</h2>
</div>
);
};
API Reference
The translate function implementation:
function translate(
key: string,
options?: any,
defaultMessage?: string,
): string;
function translate(
key: string,
defaultMessage?: string
): string;
Behavior
- If an
i18nProvider is configured, it calls the provider’s translate method
- If the key is not found and a
defaultMessage is provided, returns the defaultMessage
- If called with two parameters where the second is a string (no options), treats it as
defaultMessage
- Falls back to returning the
key itself if no translation or default message is available
This hook requires an i18nProvider to be configured in your <Refine> component. Without an i18n provider, the hook will return the default message or the key itself.
For a complete i18n setup guide, including how to configure translation files and providers, see the i18n guide.