Skip to main content
Refine AI
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>
  );
};

canEdit and editButtonProps​

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​

PropertyTypeDescriptionDefault
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: RefreshButtonProps

undefined; listButtonProps: ListButtonProps

undefined; }>

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<string

number

symbol, 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

canEdit

boolean

Adds a <EditButton />

If the resource is passed a edit component, true else false

recordItemId

BaseKey

The record id for <RefreshButton />

Previous
List
Next
Clone