Skip to main content
Version: 3.xx.xx

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​

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

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. β†’

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. β†’

goBack​

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

isLoading​

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

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. β†’

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.

headerProps​

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. β†’

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. β†’

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.

headerButtonProps​

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. β†’

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.

footerButtonProps​

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. β†’

actionButtons​

Deprecated

Use headerButtons or footerButtons instead.

<Create> uses the Ant Design <Card> component. The action property of the <Card> component shows <SaveButton> and <DeleteButton> based on your resource definition in the resources 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.

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

export const CreatePage: React.FC = () => {
return (
<Create
actionButtons={
<>
<Button type="primary">Custom Button 1</Button>
<Button size="small">Custom Button 2</Button>
</>
}
>
...
</Create>
);
};

pageHeaderProps​

Deprecated

Use headerProps, wrapperProps or contentProps instead.

<Create> uses the Ant Design <PageHeader> components so you can customize with the props of pageHeaderProps.

By default, the breadcrumb property of the <PageHeader> component shows <Breadcrumb> component.

Refer to the <PageHeader> documentation for detailed usage. β†’

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

export const CreatePage: React.FC = () => {
return (
<Create
pageHeaderProps={{
onBack: () => console.log("Hello, refine"),
subTitle: "Subtitle",
breadcrumb: <Breadcrumb breadcrumbProps={{ separator: "-" }} />,
}}
>
...
</Create>
);
};

API Reference​

Properties​

PropertyDescriptionTypeDefault
titleAdds titleReact.ReactNode"Edit" prefix and singular of resource.name
saveButtonPropsAdds props for create button{ disabled: boolean; onClick: () => void; loading: boolean; }<SaveButton>
resourceResource name for API data interactionsstringResource name that it reads from the URL.
goBackCustom back icon elementReact.ReactNode<ArrowLeft />
isLoadingLoading state of the componentbooleanfalse
breadcrumbCustom breadcrumb elementReact.ReactNode<Breadcrumb/>
wrapperPropsWrapper element propsReact.DetailedHTMLProps<HTMLDivElement>
headerPropsHeader element propsPageHeaderProps
contentPropsContent wrapper element propsCardProps
headerButtonsHeader buttons element or render function({ defaultButtons: React.ReactNode }) => React.ReactNode | React.ReactNode
headerButtonPropsHeader buttons wrapper element propsSpaceProps
footerButtonsFooter buttons element or render function({ defaultButtons: React.ReactNode }) => React.ReactNode | React.ReactNode
footerButtonPropsFooter buttons wrapper element propsSpaceProps
actionButtons
deprecated
Passes the props for <PageHeader>React.ReactNode<SaveButton> and depending on your resource configuration (canDelete prop)
pageHeaderProps
deprecated
Passes the props for <PageHeader>PageHeaderProps{ ghost: false, title, extra: <ListButton> and <RefreshButton>, breadcrumb: Breadcrumb }