Show
<Show>
provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button and being able to give titles to the page.
We will show what <Show>
does using properties with examples.
You can swizzle this component with the refine CLI to customize it.
Properties
title
title
allows the addition of titles inside the <Show>
component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it would be "Show post".
resource
The <Show>
component reads the resource
information from the route by default. TIf you want to use a custom resource for the <Show>
component, you can use the resource
prop.
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.
For more information, refer to the
identifier
section of the<Refine/>
component documentation →
canDelete
and canEdit
canDelete
and canEdit
allows us to add the delete and edit buttons inside the <Show>
component. If the resource has canDelete
or canEdit
property refine adds the buttons by default.
When clicked on, delete button executes the useDelete
method provided by the dataProvider
and the edit button redirects the user to the record edit page.
For more information, refer to the
<DeleteButton>
and the<EditButton>
documentation.
For more information, refer to the
usePermission
documentation →
recordItemId
The <Show>
component reads the id
information from the route by default. recordItemId
is used when it cannot read from the URL, such as when it's used on a custom page, modal or drawer.
The <Edit>
component needs the id
information for the <RefreshButton>
to work properly.
dataProviderName
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.
import { Refine } from "@refinedev/core";
import { Show } from "@refinedev/mantine";
import dataProvider from "@refinedev/simple-rest";
const PostShow = () => {
return <Show dataProviderName="other">...</Show>;
};
export const App: React.FC = () => {
return (
<Refine
dataProvider={{
default: dataProvider("https://api.fake-rest.refine.dev/"),
other: dataProvider("https://other-api.fake-rest.refine.dev/"),
}}
>
{/* ... */}
</Refine>
);
};
goBack
To customize the back button or to disable it, you can use the goBack
property. You can pass false
or null
to hide the back button.
isLoading
To toggle the loading state of the <Edit/>
component, you can use the isLoading
property.
breadcrumb
To customize or disable the breadcrumb, you can use the breadcrumb
property. By default it uses the Breadcrumb
component from @refinedev/mantine
package.
This feature can be managed globally via the <Refine>
component's options
For more information, refer to the
Breadcrumb
documentation →
wrapperProps
If you want to customize the wrapper of the <Show/>
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.
For more information, refer to the
Card
documentation from Mantine →
headerProps
If you want to customize the header of the <Show/>
component, you can use the headerProps
property.
For more information, refer to the
Group
documentation from Mantine →
contentProps
If you want to customize the content of the <Show/>
component, you can use the contentProps
property.
For more information, refer to the
Box
documentation from Mantine →
headerButtons
By default, the <Show/>
component has a <ListButton>
, <EditButton>
, <DeleteButton>
, and, <RefreshButton>
at the header.
You can customize the buttons at the header by using the headerButtons
property. It accepts React.ReactNode
or a render function ({ defaultButtons, deleteButtonProps, editButtonProps, listButtonProps, refreshButtonProps }) => React.ReactNode
which you can use to keep the existing buttons and add your own.
If the "list" resource is not defined, the <ListButton>
will not render and listButtonProps
will be undefined
.
If canDelete
is false
, the <DeleteButton>
will not render and deleteButtonProps
will be undefined
.
If canEdit
is false
, <EditButton>
will not render and editButtonProps
will be undefined
.
Or, instead of using the defaultButtons
, you can create your own buttons. If you want, you can use createButtonProps
to utilize the default values of the <ListButton>
, <EditButton>
, <DeleteButton>
, and, <RefreshButton>
components.
headerButtonProps
You can customize the wrapper element of the buttons at the header by using the headerButtonProps
property.
Refer to the Group
documentation from Mantine 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.
For more information, refer to the
Box
documentation from Mantine →