<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.
Live previews only work with the latest documentation.
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' }}
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".
Live previews only work with the latest documentation.
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. →
Live previews only work with the latest documentation.
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' }]}
/>
)
}
<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. →
Live previews only work with the latest documentation.
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.
Live previews only work with the latest documentation.
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.
Live previews only work with the latest documentation.
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. →
This feature can be managed globally via the <Refine> component's options
Live previews only work with the latest documentation.
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. →
Live previews only work with the latest documentation.
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>
)
}
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. →
Live previews only work with the latest documentation.
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. →
Live previews only work with the latest documentation.
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>
)
}
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.
Live previews only work with the latest documentation.
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>
)
}
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. →
Live previews only work with the latest documentation.
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>
)
}
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.
Live previews only work with the latest documentation.
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>
)
}
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. →
Live previews only work with the latest documentation.
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>
)
}
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
Use wrapperProps instead.
<Create> uses the Material UI <Card> components so you can customize with the props of cardProps.
<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
Use contentProps instead.
<Create> uses the Material UI <CardContent> components so you can customize with the props of cardContentProps.
cardActionsProps
Use headerButtonProps and footerButtonProps instead.
<Create> uses the Material UI <CardActions> components so you can customize with the props of cardActionsProps.
API Reference
Properties
Live previews only work with the latest documentation.
const SampleList = () => {
const { dataGridProps } = RefineMui.useDataGrid()
const { data: categoryData, isLoading: categoryIsLoading } =
RefineCore.useMany({
resource: 'categories',
ids: dataGridProps?.rows?.map((item: any) => item?.category?.id) ?? [],
queryOptions: {
enabled: !!dataGridProps?.rows,
},
})
const columns = React.useMemo<GridColumns<any>>(
() => [
{
field: 'id',
headerName: 'Id',
type: 'number',
minWidth: 50,
},
{
field: 'title',
headerName: 'Title',
minWidth: 200,
},
{
field: 'category',
headerName: 'Category',
valueGetter: ({ row }) => {
const value = row?.category?.id
return value
},
minWidth: 300,
renderCell: function render({ value }) {
return categoryIsLoading ? (
<>Loading...</>
) : (
categoryData?.data?.find((item) => item.id === value)?.title
)
},
},
{
field: 'createdAt',
headerName: 'Created At',
minWidth: 250,
renderCell: function render({ value }) {
return <RefineMui.DateField value={value} />
},
},
],
[categoryData?.data],
)
return (
<RefineMui.List>
<RefineMui.DataGrid {...dataGridProps} columns={columns} autoHeight />
</RefineMui.List>
)
}
const Wrapper = ({ children }) => {
return (
<RefineMui.ThemeProvider theme={RefineMui.LightTheme}>
<RefineMui.CssBaseline />
<RefineMui.GlobalStyles
styles={{ html: { WebkitFontSmoothing: 'auto' } }}
/>
{children}
</RefineMui.ThemeProvider>
)
}
http://localhost:3000