<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 {
Create,
Form,
Input,
Select,
useForm,
useSelect,
} from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>()
const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: 'categories',
})
return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Category"
name={['category', 'id']}
rules={[
{
required: true,
},
]}
>
<Select {...categorySelectProps} />
</Form.Item>
<Form.Item
label="Status"
name="status"
rules={[
{
required: true,
},
]}
>
<Select
options={[
{
label: 'Published',
value: 'published',
},
{
label: 'Draft',
value: 'draft',
},
{
label: 'Rejected',
value: 'rejected',
},
]}
/>
</Form.Item>
</Form>
</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 } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create title="Custom Title">
<p>Rest of your page here</p>
</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. →
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create saveButtonProps={{ size: 'small' }}>
<p>Rest of your page here</p>
</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 } from '@pankod/refine-antd'
import routerProvider from '@pankod/refine-react-router-v6'
import dataProvider from '@pankod/refine-simple-rest'
const CustomPage: React.FC = () => {
return (
<Create resource="posts">
<p>Rest of your page here</p>
</Create>
)
}
const App: React.FC = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{
element: <CustomPage />,
path: '/custom',
},
],
}}
dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
resources={[{ name: 'posts' }]}
/>
)
}
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, Icons } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create goBack={<Icons.SmileOutlined />}>
<p>Rest of your page here</p>
</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-antd'
const PostCreate: React.FC = () => {
return (
<Create isLoading={true}>
<p>Rest of your page here</p>
</Create>
)
}
breadcrumb
To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @pankod/refine-antd 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-antd'
const PostCreate: React.FC = () => {
return (
<Create
breadcrumb={
<div
style={{
padding: '3px 6px',
border: '2px dashed cornflowerblue',
}}
>
<Breadcrumb />
</div>
}
>
<p>Rest of your page here</p>
</Create>
)
}
wrapperProps
If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property. For @pankod/refine-antd wrapper elements are simple <div/>s and wrapperProps can get every attribute that <div/> can get.
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create
wrapperProps={{
style: {
backgroundColor: 'cornflowerblue',
padding: '16px',
},
}}
>
<p>Rest of your page here</p>
</Create>
)
}
If you want to customize the header of the <Create/> component, you can use the headerProps property.
Refer to the PageHeader documentation from Ant Design for detailed usage. →
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create
headerProps={{
subTitle: 'This is a subtitle',
style: {
backgroundColor: 'cornflowerblue',
padding: '16px',
},
}}
>
<p>Rest of your page here</p>
</Create>
)
}
contentProps
If you want to customize the content of the <Create/> component, you can use the contentProps property.
Refer to the Card documentation from Ant Design for detailed usage. →
Live previews only work with the latest documentation.
import { Create } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create
contentProps={{
style: {
backgroundColor: 'cornflowerblue',
padding: '16px',
},
}}
>
<p>Rest of your page here</p>
</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-antd'
const PostCreate: React.FC = () => {
return (
<Create
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<Button type="primary">Custom Button</Button>
</>
)}
>
<p>Rest of your page here</p>
</Create>
)
}
You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.
Refer to the Space documentation from Ant Design for detailed usage. →
Live previews only work with the latest documentation.
import { Create, Button } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create
headerButtonProps={{
style: {
backgroundColor: 'cornflowerblue',
padding: '16px',
},
}}
headerButtons={<Button type="primary">Custom Button</Button>}
>
<p>Rest of your page here</p>
</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-antd'
const PostCreate: React.FC = () => {
return (
<Create
footerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<Button type="primary">Custom Button</Button>
</>
)}
>
<p>Rest of your page here</p>
</Create>
)
}
You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.
Refer to the Space documentation from Ant Design for detailed usage. →
Live previews only work with the latest documentation.
import { Create, Button } from '@pankod/refine-antd'
const PostCreate: React.FC = () => {
return (
<Create
footerButtonProps={{
style: {
float: 'right',
marginRight: 24,
backgroundColor: 'cornflowerblue',
padding: '16px',
},
}}
>
<p>Rest of your page here</p>
</Create>
)
}
API Reference
Props
http://localhost:3000