Skip to main content
Version: 3.xx.xx

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.

src/pages/posts/create.tsx
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>
);
};

actionButton Usage

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>
);
};

Card Header Props Usage

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

PropertyDescriptionTypeDefault
saveButtonPropsAdds props for <SaveButton>{ disabled: boolean; onClick: () => void; loading: boolean; }<SaveButton>
actionButtonsPasses the props for <CardActions>React.ReactNode<SaveButton> and depending on your resource configuration (canDelete prop)
cardPropsPasses the props for <Card>CardProps<SaveButton> and depending on your resource configuration (canDelete prop)
cardHeaderPropsPasses the props for <CardHeader>CardHeaderProps
cardContentPropsPasses the props for <CardContent>CardContentProps
cardActionsPropsPasses the props for <CardActions>CardActionsProps
resourceResource name for API data interactionsstringResource name that it reads from the URL.
isLoadingPasses the props for <SaveButton>booleanfalse