metropolitan-bronze•8mo ago

useTranslation from documentation does not exist

I'm trying to use the useTranslation hook just like in the documentation. I've followed all the steps, and inside the Header component I'm trying to do import { useTranslation } from '@refinedev/core';, and then :

    const { i18n, getLocale, changeLocale } = useTranslation();
    const currentLocale = getLocale();

    const { i18n, getLocale, changeLocale } = useTranslation();
    const currentLocale = getLocale();

But it says that useTranslation does not exist, and the suggested useTranslate does not provide any of the aforementioned properties.

3 Replies

kapa.ai•8mo ago

Hi @Raekh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like there might be some confusion between the useTranslation hook from @refinedev/core and the one from react-i18next. Based on the provided documentation, here is how you can correctly use the useTranslation hook from @refinedev/core. First, ensure that you have set up the i18nProvider correctly in your App.tsx file. Here is an example setup:

import { Refine } from "@refinedev/core";
import { useTranslation } from "react-i18next";
import { I18nProvider } from "@refinedev/core";

const App: React.FC = () => {
    const { t, i18n } = useTranslation();

    const i18nProvider: I18nProvider = {
        translate: (key: string, options?: any) => t(key, options),
        changeLocale: (lang: string) => i18n.changeLanguage(lang),
        getLocale: () => i18n.language,
    };

    return (
        <Refine i18nProvider={i18nProvider}>
            {/* ... */}
        </Refine>
    );
};

export default App;

import { Refine } from "@refinedev/core";
import { useTranslation } from "react-i18next";
import { I18nProvider } from "@refinedev/core";

const App: React.FC = () => {
    const { t, i18n } = useTranslation();

    const i18nProvider: I18nProvider = {
        translate: (key: string, options?: any) => t(key, options),
        changeLocale: (lang: string) => i18n.changeLanguage(lang),
        getLocale: () => i18n.language,
    };

    return (
        <Refine i18nProvider={i18nProvider}>
            {/* ... */}
        </Refine>
    );
};

export default App;

Source (https://refine.dev/docs/guides-concepts/i18n/#creating-the-i18n-provider) Next, in your Header component, you should be able to use the useTranslation hook from @refinedev/core as follows:

import { DownOutlined } from "@ant-design/icons";
import { useTranslation } from "@refinedev/core";
import { Avatar, Button, Dropdown, Layout, Menu, Space } from "antd";

export const Header: React.FC = () => {
    const { getLocale, changeLocale } = useTranslation();
    const currentLocale = getLocale();
const menu = (
        <Menu selectedKeys={currentLocale ? [currentLocale] : []}>
            {["en", "de"].map((lang: string) => (
                <Menu.Item
                    key={lang}
                    onClick={() => changeLocale(lang)}
                    icon={
                        <span style={{ marginRight: 8 }}>
                            <Avatar size={16} src={`/images/flags/${lang}.svg`} />
                        </span>
                    }
                >
                    {lang === "en" ? "English" : "German"}
                </Menu.Item>
            ))}
        </Menu>
    );

    return (
        <Layout.Header
            style={{
                display: "flex",
                justifyContent: "flex-end",
                alignItems: "center",
                padding: "0px 24px",
                height: "48px",
                backgroundColor: "#FFF",
            }}
        >
            <Dropdown overlay={menu}>
                <Button type="link">
                    <Space>
                        <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
                        {currentLocale === "en" ? "English" : "German"}
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Layout.Header>
    );
};

import { DownOutlined } from "@ant-design/icons";
import { useTranslation } from "@refinedev/core";
import { Avatar, Button, Dropdown, Layout, Menu, Space } from "antd";

export const Header: React.FC = () => {
    const { getLocale, changeLocale } = useTranslation();
    const currentLocale = getLocale();
const menu = (
        <Menu selectedKeys={currentLocale ? [currentLocale] : []}>
            {["en", "de"].map((lang: string) => (
                <Menu.Item
                    key={lang}
                    onClick={() => changeLocale(lang)}
                    icon={
                        <span style={{ marginRight: 8 }}>
                            <Avatar size={16} src={`/images/flags/${lang}.svg`} />
                        </span>
                    }
                >
                    {lang === "en" ? "English" : "German"}
                </Menu.Item>
            ))}
        </Menu>
    );

    return (
        <Layout.Header
            style={{
                display: "flex",
                justifyContent: "flex-end",
                alignItems: "center",
                padding: "0px 24px",
                height: "48px",
                backgroundColor: "#FFF",
            }}
        >
            <Dropdown overlay={menu}>
                <Button type="link">
                    <Space>
                        <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
                        {currentLocale === "en" ? "English" : "German"}
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Layout.Header>
    );
};

Source (https://refine.dev/docs/guides-concepts/i18n/#changing-the-locale) Make sure you have the correct imports and that your i18nProvider is properly set up and passed to the <Refine /> component. This should resolve the issue of useTranslation not being recognized. If you still encounter issues, double-check that all dependencies are correctly installed and up to date. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@111054132537741312> kapa.ai is still learning and improving, please let us know how it did by reacting below

metropolitan-bronzeOP•8mo ago

Everything should be correct as per the documentation but it doesn't work. This answer doesn't provide anything more than the documentation does.

useTranslation from documentation does not exist

Did you find this page helpful?