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.

http://localhost:3000/posts/create

import React from "react";
import {
    Create,
    useAutocomplete,
    TextField,
    Autocomplete,
    Box,
} from "@pankod/refine-mui";
import { useForm, Controller } from "@pankod/refine-react-hook-form";

const SampleCreate = () => {
    const {
        saveButtonProps,
        refineCore: { formLoading },
        register,
        control,
        formState: { errors },
    } = useForm();

    const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
        resource: "categories",
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <Box
                component="form"
                sx={{ display: "flex", flexDirection: "column" }}
                autoComplete="off"
            >
                <TextField
                    {...register("title", {
                        required: "This field is required",
                    })}
                    error={!!(errors as any)?.title}
                    helperText={(errors as any)?.title?.message}
                    margin="normal"
                    fullWidth
                    InputLabelProps={{ shrink: true }}
                    type="text"
                    label="Title"
                    name="title"
                />
                <TextField
                    {...register("content", {
                        required: "This field is required",
                    })}
                    error={!!(errors as any)?.content}
                    helperText={(errors as any)?.content?.message}
                    margin="normal"
                    fullWidth
                    InputLabelProps={{ shrink: true }}
                    multiline
                    label="Content"
                    name="content"
                />
                <Controller
                    control={control}
                    name="category"
                    rules={{ required: "This field is required" }}
                    // eslint-disable-next-line
                    defaultValue={null as any}
                    render={({ field }) => (
                        <Autocomplete
                            {...categoryAutocompleteProps}
                            {...field}
                            onChange={(_, value) => {
                                field.onChange(value);
                            }}
                            getOptionLabel={(item) => {
                                return (
                                    categoryAutocompleteProps?.options?.find(
                                        (p) =>
                                            p?.id?.toString() ===
                                            item?.id?.toString(),
                                    )?.title ?? ""
                                );
                            }}
                            isOptionEqualToValue={(option, value) =>
                                value === undefined ||
                                option.id.toString() === value?.id?.toString()
                            }
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                    label="Category"
                                    margin="normal"
                                    variant="outlined"
                                    error={!!(errors as any)?.category?.id}
                                    helperText={
                                        (errors as any)?.category?.id?.message
                                    }
                                    required
                                />
                            )}
                        />
                    )}
                />
            </Box>
        </Create>
    );
};

Swizzle

You can swizzle this component to customize it with the refine CLI

Properties

title

It allows adding title inside the <Create> component. if you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the /posts/create resource, it will be "Create post".

http://localhost:3000/posts/create

import { Create, Typography } from "@pankod/refine-mui";

const CreatePage: React.FC = () => {
    return (
        <Create
            title={<Typography variant="h5">Custom Title</Typography>}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

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. →

http://localhost:3000/custom

import { Refine } from "@pankod/refine-core";
import { Create, Layout } from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

const CustomPage: React.FC = () => {
    return (
        <Create resource="posts">
            <span>Rest of your page here</span>
        </Create>
    );
};

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        element: <CustomPage />,
                        path: "/custom",
                    },
                ],
            }}
            Layout={Layout}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            resources={[{ name: "posts" }]}
        />
    );
};

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. →

http://localhost:3000/posts/create

import { Create } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    return (
        <Create saveButtonProps={{ size: "small" }}>
            <span>Rest of your page here</span>
        </Create>
    );
};

goBack

To customize the back button or to disable it, you can use the goBack property.

http://localhost:3000/posts/create

import { Create, Button } from "@pankod/refine-mui";
import { useNavigation } from "@pankod/refine-core";

const BackButton = () => {
    const { goBack } = useNavigation();

    return <Button onClick={() => goBack()}>BACK!</Button>
}

const PostCreate: React.FC = () => {
    return (
        <Create
            goBack={<BackButton />}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

isLoading

To toggle the loading state of the <Create/> component, you can use the isLoading property.

http://localhost:3000/posts/create

import { Create } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            isLoading={loading}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

breadcrumb

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @pankod/refine-mui package.

Refer to the Breadcrumb documentation for detailed usage. →

tip

This feature can be managed globally via the <Refine> component's options

http://localhost:3000/posts/create

import { Create, Breadcrumb } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    return (
        <Create
            breadcrumb={
                <div
                    style={{
                        padding: "3px 6px",
                        border: "2px dashed cornflowerblue",
                    }}
                >
                    <Breadcrumb />
                </div>
            }
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

wrapperProps

If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property.

Refer to the Card documentation from Material UI for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            wrapperProps={{
                sx: {
                    backgroundColor: "lightsteelblue",
                },
            }}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

headerProps

If you want to customize the header of the <Create/> component, you can use the headerProps property.

Refer to the CardHeader documentation from Material UI for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            headerProps={{
                sx: {
                    backgroundColor: "lightsteelblue",
                },
            }}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

contentProps

If you want to customize the content of the <Create/> component, you can use the contentProps property.

Refer to the CardContent documentation from Material UI for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            contentProps={{
                sx: {
                    backgroundColor: "lightsteelblue",
                },
            }}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

headerButtons

You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create

import { Create, Button } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            headerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

headerButtonProps

You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.

Refer to the Box documentation from Material UI for detailed usage. →

http://localhost:3000/posts/create

import { Create, Button } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            headerButtonProps={{
                sx: {
                    backgroundColor: "lightsteelblue",
                },
            }}
            headerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

footerButtons

You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create

import { Create, Button } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            footerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

footerButtonProps

You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.

Refer to the CardActions documentation from Material UI for detailed usage. →

http://localhost:3000/posts/create

import { Create, Button } from "@pankod/refine-mui";

const PostCreate: React.FC = () => {
    const [loading, setLoading] = React.useState(true);

    return (
        <Create
            footerButtonProps={{
                sx: {
                    backgroundColor: "lightsteelblue",
                },
            }}
            footerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <span>Rest of your page here</span>
        </Create>
    );
};

actionButtons

Deprecated

Use headerButtons or footerButtons instead.

<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

Deprecated

Use wrapperProps instead.

<Create> uses the Material UI <Card> components so you can customize with the props of cardProps.

cardHeaderProps

Deprecated

Use headerProps instead.

<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

Deprecated

Use contentProps instead.

<Create> uses the Material UI <CardContent> components so you can customize with the props of cardContentProps.

cardActionsProps

Deprecated

Use headerButtonProps and footerButtonProps instead.

<Create> uses the Material UI <CardActions> components so you can customize with the props of cardActionsProps.

API Reference

Properties