<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.
import React from "react";
import { Create, useAutocomplete } from "@refinedev/mui";
import { Autocomplete, Box, TextField } from "@mui/material";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "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" }}
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 ?? value)?.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>
);
};
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".
import { Create } from "@refinedev/mui";
import { Typography } from "@mui/material";
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. If you want to use a custom resource for the <Create> component, you can use the resource prop.
import { Create } from "@refinedev/mui";
const CustomPage: React.FC = () => {
return (
<Create resource="posts">
<span>Rest of your page here</span>
</Create>
);
};
<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 "@refinedev/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.
import { Create } from "@refinedev/mui";
import { Button } from "@mui/material";
import { useBack } from "@refinedev/core";
const BackButton = () => {
const goBack = useBack();
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.
import { Create } from "@refinedev/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 @refinedev/mui package.
Refer to the Breadcrumb documentation for detailed usage. →
This feature can be managed globally via the <Refine> component's options
import { Create, Breadcrumb } from "@refinedev/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. →
import { Create } from "@refinedev/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>
);
};
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. →
import { Create } from "@refinedev/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. →
import { Create } from "@refinedev/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>
);
};
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.
import { Create } from "@refinedev/mui";
import { Button } from "@mui/material";
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>
);
};
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. →
import { Create } from "@refinedev/mui";
import { Button } from "@mui/material";
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>
);
};
By default, the <Create/> component has a <SaveButton> at the header.
You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons, saveButtonProps }) => React.ReactNode which you can use to keep the existing buttons and add your own.
import { Create } from "@refinedev/mui";
import { Button } from "@mui/material";
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>
);
};
Or, instead of using the defaultButtons, you can create your own buttons. If you want, you can use saveButtonProps to utilize the default values of the <SaveButton> component.
import { Create, SaveButton } from "@refinedev/mui";
import { Button } from "@mui/material";
const PostCreate: React.FC = () => {
const [loading, setLoading] = React.useState(true);
return (
<Create
footerButtons={({ saveButtonProps }) => (
<>
<SaveButton
{...saveButtonProps}
type="primary"
sx={{ marginRight: 8 }}
>
Save
</SaveButton>
<Button type="primary">Custom Button</Button>
</>
)}
>
<span>Rest of your page here</span>
</Create>
);
};
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. →
import { Create } from "@refinedev/mui";
import { Button } from "@mui/material";
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>
);
};
API Reference
Properties
http://localhost:3000/posts/create