Version: 4.xx.xx
Swizzle Ready
Text
const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: routerProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
Layout: RefineChakra.Layout,
Sider: () => null,
});
const Wrapper = ({ children }) => {
return (
<ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
{children}
</ChakraUI.ChakraProvider>
);
};
This field lets you show basic text. It uses Chakra UI's <Text> component.
Good to know:
You can swizzle this component to customize it with the Refine CLI
Usage
Let's see how to use it in a basic show page:
setInitialRoutes(["/posts/show/123"]);
import { Refine } from "@refinedev/core";
import { ShowButton } from "@refinedev/chakra-ui";
// visible-block-start
import { useShow } from "@refinedev/core";
import {
Show,
TextField,
} from "@refinedev/chakra-ui";
import { Heading } from "@chakra-ui/react";
const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show isLoading={isLoading}>
<Heading as="h5" size="sm">
Id
</Heading>
<TextField value={record?.id} />
<Heading as="h5" size="sm">
Title
</Heading>
<TextField value={record?.title} />
</Show>
);
};
interface IPost {
id: number;
title: string;
}
// visible-block-end
const App = () => {
return (
<Refine
notificationProvider={RefineChakra.notificationProvider()}
resources={[
{
name: "posts",
show: PostShow,
list: () => (
<RefineChakra.VStack alignItems="flex-start">
<RefineChakra.Text>This page is empty.</RefineChakra.Text>
<ShowButton colorScheme="black" recordItemId="123">
Show Item 123
</ShowButton>
</RefineChakra.VStack>
),
},
]}
/>
);
};
render(
<Wrapper>
<App />
</Wrapper>,
);
API Reference
Properties
External Props:
It also accepts all props of Chakra UI's Text component.