Get default List, Create, Post page style

I want to create a custom component but still inherit style from the list, create or post page

13 Replies

kapa.ai•11mo ago

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can create a custom component and still inherit the style from the list, create, or post page by using the List component from refine. The List component reads the resource information from the route by default. If you want to use a custom resource for the List component, you can use the resource prop. Here is an example:

import { List } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="posts">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="posts">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component. For more information, refer to the identifier of the <Refine/> component documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#identifier). You can also customize the content of the <Create/> component using the contentProps property. The <List/> components content is wrapped with a <div/> and contentProps can get every attribute that <div/> can get. Here is an example:

import { List } from "@refinedev/antd";  
  
const PostList: React.FC = () => {  
 return (  
 <List  
 contentProps={{  
 style: {  
 backgroundColor: "cornflowerblue",  
 padding: "16px",  
 },  
 }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/antd";  
  
const PostList: React.FC = () => {  
 return (  
 <List  
 contentProps={{  
 style: {  
 backgroundColor: "cornflowerblue",  
 padding: "16px",  
 },  
 }}  
 >  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

Sources: - Ant Design List Component (https://refine.dev/docs/api-reference/antd/components/basic-views/list/) - Material UI List Component (https://refine.dev/docs/api-reference/mui/components/basic-views/list/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

xenial-black•11mo ago

How can I see the code of the original refine List page @kapa.ai

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can view the source code of the original refine List page by using the refine CLI to swizzle the component. Swizzling allows you to customize the component. Here is how you can do it:

npx @refinejs/cli swizzle list

npx @refinejs/cli swizzle list

After running this command, the List component's code will be copied to your project, and you can modify it as you wish. For more information, refer to the refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

xenial-black•11mo ago

change default create api call of one page only example: POST /user/submit/create to POST /user/submit @kapa.ai

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can change the default create API call for a specific page by using the useForm hook from refine. The useForm hook provides a mutation option that you can use to override the default mutation used to create a resource. Here is an example of how you can do it:

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

import { useForm, useMutation } from "@refinedev/antd";  

const UserCreate: React.FC = () => {  
 const { mutate } = useMutation({  
 resource: "users",  
 action: "create",  
 });  

 const { formProps, saveButtonProps } = useForm({  
 mutation: (values) => mutate({  
 endpoint: "/submit",  
 data: values,  
 }),  
 });  

 // Rest of your component
};

In this example, the useMutation hook is used to create a custom mutation for the "users" resource. The useForm hook then uses this custom mutation instead of the default one. The endpoint option in the mutate function is used to specify the custom endpoint ("/submit") for the create action. For more information, refer to the useForm (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/) and useMutation (https://refine.dev/docs/api-reference/core/hooks/data/useMutation/) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

xenial-black•11mo ago

I don't see it in the document @kapa.ai

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The information provided in the previous response is not directly available in the provided extracts. However, you can customize the API calls in refine by using a custom data provider. A data provider is an adapter for your API that allows refine to interact with it. It's an object that interprets refine's data-related calls into API calls, and returns the API's responses in a format that refine can use. Unfortunately, the specific details on how to customize the API calls for a specific page are not provided in the extracts. For more detailed information, I recommend checking the Data Provider documentation (https://refine.dev/docs/api-reference/providers/data-provider) on the refine website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

Omer•11mo ago

Hey @tads8799 , You can use the resource property of the useForm hook. You can find more details on how to use it here: https://refine.dev/docs/api-reference/core/hooks/useForm/#resource

useForm | refine

useForm is a hook that allows you to manage forms. It has some action methods that create, edit and clone the form. The hook return value comes according to the called action, and it can run different logic depending on the action.

xenial-black•11mo ago

It works, thanks. I keep edit the resource in the <Create /> tag