like-gold•7mo ago

Does MUI Inferencer support custom components?

We have a small wrapper around Material UI altering minor things on the generic components. Currently, the inferencer uses Refine components like EditButton that is a small wrapper around the MUI Button, and, for example MUI Checkbox via renderedFields internally. Is there a way for the Inferencer to provide custom components to render, or at least a way to look for the MUI components in @company/react-mui when generating the inferenced code?

10 Replies

kapa.ai•7mo ago

Hi @Tinus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, the Inferencer in Refine uses specific components from the UI libraries it supports, such as Material UI, Ant Design, etc. It does not appear to support the direct use of custom components. The Inferencer uses renderer functions to create the code for the components and to render the components in the view. These renderer functions are constructed per action type and the UI package. For example, @refinedev/inferencer/mui has different renderer functions for list, show, edit, and create actions. However, the extracts do not provide information on whether the Inferencer can be configured to use custom components or to look for Material UI components in a different package like @company/react-mui. For more detailed information or potential workarounds, you may want to refer to the Refine documentation (https://refine.dev/docs) or reach out to the Refine community or support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

like-gold•7mo ago

@kapa.ai Is there boilerplate code available to base a UI on without having to manually regenerate the inferencer magic?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, the Inferencer in Refine does generate boilerplate code based on your API responses. This code serves as a starting point to save time in development. Here's an example of how you can use the Inferencer to generate boilerplate code for your application:

import { AntdInferencer } from "@refinedev/inferencer/antd";  
// or @refinedev/inferencer/mui, @refinedev/inferencer/chakra, @refinedev/inferencer/mantine, @refinedev/inferencer/headless  
  
export const ProductList = () => {  
 // Scaffolds List page.  
 return <AntdInferencer />;  
};  
  
export const ProductShow = () => {  
 // Scaffolds Show page.  
 return <AntdInferencer />;  
};  
  
export const ProductEdit = () => {  
 // Scaffolds Edit page with form.  
 return <AntdInferencer />;  
};  
  
export const ProductCreate = () => {  
 // Scaffolds Create page with form.  
 return <AntdInferencer />;  
};

import { AntdInferencer } from "@refinedev/inferencer/antd";  
// or @refinedev/inferencer/mui, @refinedev/inferencer/chakra, @refinedev/inferencer/mantine, @refinedev/inferencer/headless  
  
export const ProductList = () => {  
 // Scaffolds List page.  
 return <AntdInferencer />;  
};  
  
export const ProductShow = () => {  
 // Scaffolds Show page.  
 return <AntdInferencer />;  
};  
  
export const ProductEdit = () => {  
 // Scaffolds Edit page with form.  
 return <AntdInferencer />;  
};  
  
export const ProductCreate = () => {  
 // Scaffolds Create page with form.  
 return <AntdInferencer />;  
};

This code will generate the List, Show, Edit, and Create pages for your application. However, it's important to note that the Inferencer is not always reliable for all cases and isn't intended for production use. It's meant to provide a starting point for your application's UI. For more information, you can refer to the Inferencer documentation (https://refine.dev/docs/packages/list-of-packages/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

like-gold•7mo ago

Can I provide custom components for the inferencer?

exotic-emerald•7mo ago

hello @Tinus, maybe this could be help https://refine.dev/docs/packages/inferencer/#modifying-the-inferred-fields

like-gold•7mo ago

Thanks for your response, @Alican Erdurmaz, the link you provided makes it very powerful to define the fields per CRUD action, but it wil always render them in a Card, CardHeader, CardContent and CardActions ; I was wondering how I can influence the inferencer to render custom components. Currently, I fake it by changing the styles heavily, but there is no entry point to change it structurally. If there is a way to do that, that would be great!

exotic-emerald•7mo ago

unfortunately It's not possible, you need to copy inferenced code and customize the style according to your needs

like-gold•7mo ago

Hi @Alican Erdurmaz, sorry for the late reply, but thank you for your answer; I'll see if I can tackle this challenge in a different way.