Skip to main content
RefineDocumentation
Version: 4.xx.xx
Swizzle Ready

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​

Previous
List
Next
Clone