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
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:
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:
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:
----------------------<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
sunny-green•13mo ago
How can I see the code of the original refine List page @kapa.ai
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:
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:
----------------------<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
sunny-green•13mo ago
change default create api call of one page only
example:
POST /user/submit/create
to POST /user/submit
@kapa.ai
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:
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:
----------------------<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
sunny-green•13mo ago
I don't see it in the document @kapa.ai
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:
----------------------<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
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/#resourceuseForm | 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.
sunny-green•13mo ago
It works, thanks. I keep edit the resource in the <Create /> tag