Create
<Create>
provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
We'll show what <Create>
does using properties with examples.
Properties
saveButtonProps
<Create>
component has a default button that submits the form. If you want to customize this button you can use the saveButtonProps
property like the code below.
Refer to the <SaveButton>
documentation for detailed usage. β
import { Create } from "@pankod/refine-mui";
export const CreatePage: React.FC = () => {
return <Create saveButtonProps={{ size: "small" }}>...</Create>;
};
actionButtons
<Create>
uses the Material UI <CardActions>
component. The children of the <CardActions>
component shows <SaveButton>
and <DeleteButton>
based on your resource definition in theresources
property you pass to <Refine>
. If you want to use other things instead of these buttons, you can use the actionButton
property like the code below.
import { Create, Button } from "@pankod/refine-mui";
export const CreatePage: React.FC = () => {
return (
<Create
actionButtons={
<>
<Button>Custom Button 1</Button>
<Button>Custom Button 2</Button>
</>
}
>
...
</Create>
);
};

cardProps
<Create>
uses the Material UI <Card>
components so you can customize with the props of cardProps
.
cardHeaderProps
<Create>
uses the Material UI <CardHeader>
components so you can customize with the props of cardHeaderProps
.
import { Create, Typography } from "@pankod/refine-mui";
export const CreatePage: React.FC = () => {
return (
<Create
cardHeaderProps={{
title: <Typography variant="h5">Custom Title</Typography>,
}}
>
...
</Create>
);
};

cardContentProps
<Create>
uses the Material UI <CardContent>
components so you can customize with the props of cardContentProps
.
cardActionsProps
<Create>
uses the Material UI <CardActions>
components so you can customize with the props of cardActionsProps
.
resource
The <Create>
component reads the resource
information from the route by default. This default behavior will not work on custom pages. If you want to use the <Create>
component in a custom page, you can use the resource
prop.
Refer to the custom pages documentation for detailed usage. β
import { Refine } from "@pankod/refine-core";
import { Create } from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
const CustomPage = () => {
return <Create resource="posts">...</Create>;
};
export const App: React.FC = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{
element: <CustomPage />,
path: "/custom",
},
],
}}
dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
resources={[{ name: "posts" }]}
/>
);
};
API Reference
Properties
Property | Description | Type | Default |
---|---|---|---|
saveButtonProps | Adds props for <SaveButton> | { disabled: boolean; onClick: () => void; loading: boolean; } | <SaveButton> |
actionButtons | Passes the props for <CardActions> | React.ReactNode | <SaveButton> and depending on your resource configuration (canDelete prop) |
cardProps | Passes the props for <Card> | CardProps | <SaveButton> and depending on your resource configuration (canDelete prop) |
cardHeaderProps | Passes the props for <CardHeader> | CardHeaderProps | |
cardContentProps | Passes the props for <CardContent> | CardContentProps | |
cardActionsProps | Passes the props for <CardActions> | CardActionsProps | |
resource | Resource name for API data interactions | string | Resource name that it reads from the URL. |
isLoading | Passes the props for <SaveButton> | boolean | false |