It allows adding titles inside the <Edit> component. if you don't pass title props it uses the "Edit" prefix and singular resource name by default. For example, for the "posts" resource, it will be "Edit post".
localhost:3000/posts/edit/2
Live previews only work with the latest documentation.
import{Edit}from"@pankod/refine-antd"; constPostEdit:React.FC=()=>{ return( <Edittitle="Custom Title"> <p>Rest of your page here</p> </Edit> ); };
canDelete allows us to add the delete button inside the <Edit> component. If the resource has the canDelete property,refine adds the delete button by default. If you want to customize this button you can use the deleteButtonProps property like the code below.
When clicked on, the delete button executes the useDelete method provided by the dataProvider.
<Edit> 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 <Edit> component in a custom page, you can use the resource property.
The <Edit> component reads the id information from the route by default. recordItemId is used when it cannot read from the URL(when used on a custom page, modal or drawer).
localhost:3000/posts/edit/2
Live previews only work with the latest documentation.
import{Edit, useModalForm,Modal,Button}from"@pankod/refine-antd"; constPostEdit:React.FC=()=>{ const{ modalProps, id, show }=useModalForm({ action:"edit", }); return( <div> <ButtononClick={()=>show()}>Edit Button</Button> <Modal{...modalProps}> <EditrecordItemId={id}> <p>Rest of your page here</p> </Edit> </Modal> </div> ); };
NOTE
The <Edit> component needs the id information for the <RefreshButton> to work properly.
If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the dataProviderName 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.
If you want to customize the wrapper of the <Edit/> 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.
localhost:3000/posts/edit/2
Live previews only work with the latest documentation.
import{Edit}from"@pankod/refine-antd"; constPostEdit:React.FC=()=>{ return( <Edit wrapperProps={{ style:{ backgroundColor:"cornflowerblue", padding:"16px", }, }} > <p>Rest of your page here</p> </Edit> ); };
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.
localhost:3000/posts/edit/2
Live previews only work with the latest documentation.
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.
localhost:3000/posts/edit/2
Live previews only work with the latest documentation.