Show

<Show> provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button.

We will show what <Show> does using properties with examples.

localhost:3000/posts/show/123

import { useShow, useOne } from "@refinedev/core";
import { Show, MarkdownField } from "@refinedev/chakra-ui";
import { Heading, Text } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  const { queryResult } = useShow<IPost>();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  const { data: categoryData } = useOne<ICategory>({
    resource: "categories",
    id: record?.category?.id || "",
    queryOptions: {
      enabled: !!record?.category?.id,
    },
  });

  return (
    <Show isLoading={isLoading}>
      <Heading as="h5" size="sm">
        Id
      </Heading>
      <Text mt={2}>{record?.id}</Text>

      <Heading as="h5" size="sm" mt={4}>
        Title
      </Heading>
      <Text mt={2}>{record?.title}</Text>

      <Heading as="h5" size="sm" mt={4}>
        Category
      </Heading>
      <Text mt={2}>{categoryData?.data?.title}</Text>

      <Heading as="h5" size="sm" mt={4}>
        Content
      </Heading>
      <MarkdownField value={record?.content} />
    </Show>
  );
};

title

title allows you to add a title 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 will be "Show post".

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { Heading } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show title={<Heading size="lg">Custom Title</Heading>}>
      <p>Rest of your page here</p>
    </Show>
  );
};

resource

The <Show> component reads the resource information from the route by default. If you want to use a custom resource for the <Show> component, you can use the resource prop.

localhost:3000/custom/123

import { Show } from "@refinedev/chakra-ui";

const CustomPage: React.FC = () => {
  return (
    <Show resource="posts" recordItemId={123}>
      <p>Rest of your page here</p>
    </Show>
  );
};

recordItemId

The <Show> component reads the id information from the route by default. If you want to use a custom id value, you can use the recordItemId prop.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";

const PostShow: React.FC = () => {
  return (
    <Show recordItemId="123">
      <p>Rest of your page here</p>
    </Show>
  );
};

For more information, refer to the usePermission documentation →

deleteButtonProps

If the resource has the canDelete property and you want to customize this button, you can use the deleteButtonProps property like the code below.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { usePermissions } from "@refinedev/core";

const PostShow: React.FC = () => {
  const { data: permissionsData } = usePermissions();

  return (
    <Show
      canDelete={permissionsData?.includes("admin")}
      deleteButtonProps={{ size: "small" }}
      canEdit={permissionsData?.includes("admin")}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

canEdit allows you to add an edit button inside the <Show> component. If the resource has the canEdit property, Refine adds the edit button by default. If you want to customize this button you can use the editButtonProps property.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { usePermissions } from "@refinedev/core";

const PostShow: React.FC = () => {
  const { data: permissionsData } = usePermissions();
  return (
    <Show
      canEdit={permissionsData?.includes("admin")}
      editButtonProps={{ colorScheme: "red" }}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

canDelete and deleteButtonProps

canDelete allows you to add a delete button inside the <Show> 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.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { usePermissions } from "@refinedev/core";

const PostShow: React.FC = () => {
  const { data: permissionsData } = usePermissions();
  return (
    <Show
      canDelete={permissionsData?.includes("admin")}
      deleteButtonProps={{ colorScheme: "red" }}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

goBack

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

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { IconMoodSmile } from "@tabler/icons-react";

const PostShow: React.FC = () => {
  return (
    <Show goBack={<IconMoodSmile />}>
      <p>Rest of your page here</p>
    </Show>
  );
};

isLoading

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

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";

const PostShow: React.FC = () => {
  return (
    <Show isLoading={true}>
      <p>Rest of your page here</p>
    </Show>
  );
};

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/chakra-ui package.

localhost:3000/posts/show/123

import { Show, Breadcrumb } from "@refinedev/chakra-ui";
import { Box } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show
      breadcrumb={
        <Box borderColor="blue" borderStyle="dashed" borderWidth="2px">
          <Breadcrumb />
        </Box>
      }
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

headerProps

If you want to customize the header of the <Show/> component, you can use the headerProps property.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";

const PostShow: React.FC = () => {
  return (
    <Show
      headerProps={{
        borderColor: "blue",
        borderStyle: "dashed",
        borderWidth: "2px",
      }}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

headerButtons

You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons, editButtonProps, deleteButtonProps }) => React.ReactNode which you can use to keep the existing buttons and add your own.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { Button, HStack } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show
      headerButtons={({ defaultButtons }) => (
        <HStack>
          {defaultButtons}
          <Button colorScheme="red">Custom Button</Button>
        </HStack>
      )}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

headerButtonProps

You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { Button } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show
      headerButtonProps={{
        borderColor: "blue",
        borderStyle: "dashed",
        borderWidth: "2px",
        p: "2",
      }}
      headerButtons={
        <Button colorScheme="green" variant="outline">
          Custom Button
        </Button>
      }
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

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.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { Button, HStack } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show
      footerButtons={({ defaultButtons }) => (
        <HStack borderColor="blue" borderStyle="dashed" borderWidth="2px" p="2">
          {defaultButtons}
          <Button colorScheme="red" variant="solid">
            Custom Button
          </Button>
        </HStack>
      )}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

footerButtonProps

You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.

localhost:3000/posts/show/123

import { Show } from "@refinedev/chakra-ui";
import { Button } from "@chakra-ui/react";

const PostShow: React.FC = () => {
  return (
    <Show
      footerButtonProps={{
        style: {
          float: "right",
          borderColor: "blue",
          borderStyle: "dashed",
          borderWidth: "2px",
          padding: "8px",
        },
      }}
      footerButtons={<Button colorScheme="green">Custom Button</Button>}
    >
      <p>Rest of your page here</p>
    </Show>
  );
};

API Reference

Properties

Property	Type	Description	Default
resource	`string`	Resource name for API data interactions	Reads `:resource` from the URL
title	`ReactNode`	Title of the edit view	Show {resource.name}
wrapperProps	`BoxProps`	Props for the wrapper component of the view
headerProps	`BoxProps`	Props for the header component
contentProps	`BoxProps`	Props for the content wrapper component
breadcrumb	`ReactNode`	Breadcrumb to be displayed in the header	`<Breadcrumb />`
goBack	`ReactNode`	Back button element at the top left of the page
headerButtons	`ActionButtonRenderer<{ editButtonProps: EditButtonProps; deleteButtonProps: DeleteButtonProps; refreshButtonProps: RefreshButtonPropsundefined; listButtonProps: ListButtonPropsundefined; }>`	Header action buttons to be displayed in the header
headerButtonProps	`BoxProps`	Additional props to be passed to the wrapper of the header buttons
footerButtons	`ActionButtonRenderer<Record<stringnumbersymbol, unknown>>`	Footer action buttons to be displayed in the footer	`null`
footerButtonProps	`BoxProps`	Additional props to be passed to the wrapper of the footer buttons
dataProviderName	`string`	To specify a data provider other than default use this property
isLoading	`boolean`	Loading state of the component
canDelete	`boolean`	Adds a `<DeleteButton />`	If the resource has `canDelete` prop it is `true` else `false`
deleteButtonProps	`DeleteButtonProps`	Adds properties for `<DeleteButton />`
canEdit	`boolean`	Adds a `<EditButton />`	If the resource is passed a edit component, `true` else `false`
recordItemId	`BaseKey`	The record id for `<RefreshButton />`

title​

resource​

recordItemId​

deleteButtonProps​

canDelete and deleteButtonProps​

goBack​

isLoading​

breadcrumb​

headerProps​

headerButtons​

headerButtonProps​

footerButtons​

footerButtonProps​

API Reference​

Properties​

title

resource

recordItemId

deleteButtonProps

canDelete and deleteButtonProps

goBack

isLoading

breadcrumb

headerProps

headerButtons

headerButtonProps

footerButtons

footerButtonProps

API Reference

Properties