flat-fuchsia•8mo ago

How to extact resources for <Refine> to a new file in App.tsx

As reources option is too long, i want to extract it to a new file, i tried but failed. btw, i use label: t("menus.dashboard") to i18n the menu labal

3 Replies

kapa.ai•8mo ago

Hi @df1228. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, you can extract the resources array to a separate file and import it in your App.tsx. Here's how you can do it: 1. Create a new file, let's call it resources.ts. 2. In resources.ts, define your resources array. Since you're using i18n, you'll need to use the useTranslation hook to get the t function. Here's an example:

import { useTranslation } from "react-i18next";

export const useResources = () => {
  const { t } = useTranslation();

  return [
    {
      name: "dashboard",
      list: "/dashboard",
      meta: {
        label: t("menus.dashboard"),
        // other meta properties...
      },
      // other resource properties...
    },
    // other resources...
  ];
};

import { useTranslation } from "react-i18next";

export const useResources = () => {
  const { t } = useTranslation();

  return [
    {
      name: "dashboard",
      list: "/dashboard",
      meta: {
        label: t("menus.dashboard"),
        // other meta properties...
      },
      // other resource properties...
    },
    // other resources...
  ];
};

3. In your App.tsx, import and use the useResources function:

import { useResources } from "./resources";

function App() {
  const resources = useResources();
  // ...

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

import { useResources } from "./resources";

function App() {
  const resources = useResources();
  // ...

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

This way, your resources are defined in a separate file, and you can use i18n for your labels. Please note that the code snippets provided are based on the information available in the knowledge sources and may need to be adjusted based on your specific project setup. Sources: - Creating the i18n Provider (https://refine.dev/docs/guides-concepts/i18n#creating-the-i18n-provider) - Adding resources (https://refine.dev/blog/refine-pixels-5#adding-resources) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

flat-fuchsiaOP•8mo ago

How to extract <Routes> to a new file

How to extact resources for <Refine> to a new file in App.tsx

Did you find this page helpful?