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

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