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
kapa.ai
kapa.ai250d 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
kapa.ai250d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo
fascinating-indigo250d ago
How can I see the code of the original refine List page @kapa.ai
kapa.ai
kapa.ai250d 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
kapa.ai250d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo
fascinating-indigo250d ago
change default create api call of one page only example: POST /user/submit/create to POST /user/submit @kapa.ai
kapa.ai
kapa.ai250d 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
kapa.ai250d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo
fascinating-indigo250d ago
I don't see it in the document @kapa.ai
kapa.ai
kapa.ai250d 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
kapa.ai250d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
Omer
Omer250d 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.
fascinating-indigo
fascinating-indigo250d ago
It works, thanks. I keep edit the resource in the <Create /> tag
More Posts
access control condition not working```tsx accessControlProvider={{ can: async ({ resource, action }) => { UseOne not working```tsx import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd"; import { useGetIdentiCase 0 not working```tsx accessControlProvider={{ can: async ({ resource, action }) => { access controlIs there a simple way to authorize a set of routes and resources to different role get from JWT tokeuseEditableTableThe useEditableTable hook can be used with Mui? If yes can I see an exemple ?useList filteringHello, is there a way to make filters with 'OR' operator? I want to do global search input inside myAccessControl casbin MemoryAdapterI'm following tutorial from this https://refine.dev/docs/advanced-tutorials/access-control/#adding-pcould not find the login username and password of the examples/pixels-admin, any clues?I am trying to find a complete example about casbin for RBAC, there are only two in the official exaImport Exceli have groups and contacts resources. groups can get many contacts. i wish to add a button on each gdropdown in sidebar with chakra uiHello i'm trying to create a dropdown button (parent) with its sub items (childen) yet i didn't findHey,I have a resource call groups. i wish to make crud from my rest api any helps to how i can archieveForm not loading api values@kapa.ai <Form.Item label={t('pages.marketMaker.addLoan.systemBalance')} name="@kapa.ao<Title level={5}> {"title"} </Title> <Title level={5}> {"title2"} </TitlShow show data on List pageI want a page to appeared on the Menu, but instead of List page by default. I wanna use the show datparent resource permissionI have two resource under a parent named settings. here settings is not an actual resource but we seswizzle create form RefinePageHeaderClassNames is not defineddefault generate is not properly workingSet Null as default value in useSelect``` const { selectProps } = useSelect<IUser>({ resource: "users", optionLabel: "name", accessControlProvider is set first but login is done afterwards so I get role afterwardsaccessControlProvider is set first but login is done afterwards so I get role afterwardsset a global stateset a global state variableProblem with using Autocomplete MUIThere are no errors when using Inferencer. As soon as I create the page, an error occurs.