Version: 4.xx.xxSwizzle Ready
const { default: sharedRouterProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: sharedRouterProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
Layout: RefineChakra.Layout,
Sider: () => null,
catchAll: <RefineChakra.ErrorComponent />,
});
const Wrapper = ({ children }) => {
return (
<ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
{children}
</ChakraUI.ChakraProvider>
);
};
<RefreshButton>
uses Chakra UI's <Button>
component to update the data shown on the page via the useOne
method provided by your dataProvider
.
You can swizzle this component to customize it with the refine CLI
Usage
import { useShow } from "@refinedev/core";
import {
Show,
MarkdownField,
RefreshButton,
} from "@refinedev/chakra-ui";
import { Heading, Text, Spacer } from "@chakra-ui/react";
const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show headerButtons={<RefreshButton />} 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}>
Content
</Heading>
<Spacer mt={2} />
<MarkdownField value={record?.content} />
</Show>
);
};
Properties
recordItemId
recordItemId
allows us to manage which data is going to be refreshed.
import { RefreshButton } from "@refinedev/chakra-ui";
const MyRefreshComponent = () => {
return <RefreshButton colorScheme="black" recordItemId="123" />;
};
Clicking the button will trigger the useOne
method and then fetches the record whose resource is "post" and whose id is "123".
<RefreshButton>
component reads the id information from the route by default.
resource
resource
allows us to manage which resource is going to be refreshed.
import { RefreshButton } from "@refinedev/chakra-ui";
const MyRefreshComponent = () => {
return (
<RefreshButton
colorScheme="black"
resource="categories"
recordItemId="2"
/>
);
};
Clicking the button will trigger the useOne
method and then fetches the record whose resource is "categories" and whose id is "2".
<RefreshButton>
component reads the resource name from the route by default.
hideText
It is used to show and not show the text of the button. When true
, only the button icon is visible.
import { RefreshButton } from "@refinedev/chakra-ui";
const MyRefreshComponent = () => {
return <RefreshButton colorScheme="black" hideText recordItemId="123" />;
};
resourceNameOrRouteName
deprecated
resourceNameOrRouteName
prop is deprecated. Use resource
prop instead.
resourceNameOrRouteName
allows us to manage which resource is going to be refreshed.
import { RefreshButton } from "@refinedev/chakra-ui";
const MyRefreshComponent = () => {
return (
<RefreshButton
colorScheme="black"
resourceNameOrRouteName="categories"
recordItemId="2"
/>
);
};
Clicking the button will trigger the useOne
method and then fetches the record whose resource is "categories" and whose id is "2".
<RefreshButton>
component reads the resource name from the route by default.
API Reference
Properties