Version: 4.xx.xxSwizzle Ready
const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: routerProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
notificationProvider: RefineMantine.notificationProvider,
Layout: RefineMantine.Layout,
Sider: () => null,
catchAll: <RefineMantine.ErrorComponent />,
});
const Wrapper = ({ children }) => {
return (
<MantineCore.MantineProvider
theme={RefineMantine.LightTheme}
withNormalizeCSS
withGlobalStyles
>
<MantineCore.Global
styles={{ body: { WebkitFontSmoothing: "auto" } }}
/>
<MantineNotifications.NotificationsProvider position="top-right">
{children}
</MantineNotifications.NotificationsProvider>
</MantineCore.MantineProvider>
);
};
<RefreshButton>
uses Mantine <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/mantine";
import { Title, Text } from "@mantine/core";
const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show headerButtons={<RefreshButton />} isLoading={isLoading}>
<Title order={5}>Id</Title>
<Text mt="sm">{record?.id}</Text>
<Title mt="sm" order={5}>
Title
</Title>
<Text mt="sm">{record?.title}</Text>
<Title mt="sm" order={5}>
Content
</Title>
<MarkdownField value={record?.content} />
</Show>
);
};
Properties
recordItemId
recordItemId
allows us to manage which data is going to be refreshed.
import { RefreshButton } from "@refinedev/mantine";
const MyRefreshComponent = () => {
return <RefreshButton 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/mantine";
const MyRefreshComponent = () => {
return (
<RefreshButton 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/mantine";
const MyRefreshComponent = () => {
return <RefreshButton 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/mantine";
const MyRefreshComponent = () => {
return (
<RefreshButton 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