<Create> provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like action buttons and being able to give titles to the page.
We will show what <Create> does using properties with examples.
title allows the addition of titles inside the <Create> component by passing title props. If you don't pass title props, however, it uses the "Create" prefix and the singular resource name by default. For example, for the /posts/create resource, it would be "Create post".
localhost:3000/posts/create
import{Create}from"@refinedev/mantine"; import{Title}from"@mantine/core"; constPostCreate:React.FC=()=>{ return( <Createtitle={<Titleorder={3}>Custom Title</Title>}> <p>Rest of your page here</p> </Create> ); };
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.
localhost:3000/custom
import{Create}from"@refinedev/mantine"; constCustomPage:React.FC=()=>{ return( <Createresource="categories"> <p>Rest of your page here</p> </Create> ); };
If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component.
To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/mantine package.
TIP
This feature can be managed globally via the <Refine> component's options
If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property. For @refinedev/mantine wrapper element is <Card>s and wrapperProps can get every attribute that <Card> can get.
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.
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.
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.