This is documentation for refine 3.xx.xx, which is no longer actively maintained.
Version: 3.xx.xx
Swizzle Ready
This field lets you display markdown content. It supports GitHub Flavored Markdown.
You can swizzle this component to customize it with the refine CLI
Usage
Let's see how we can use <MarkdownField> in a show page.
localhost:3000/posts/show/123
Live previews only work with the latest documentation.
import { useShow } from "@pankod/refine-core";
import { Show, Title, Text, MarkdownField } from "@pankod/refine-mantine";
const PostShow: React.FC<IResourceComponentsProps> = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show isLoading={isLoading}>
<Title order={5}>Id</Title>
<Text mt="sm">{record?.id}</Text>
<Title mt="sm" order={5}>
Content
</Title>
<MarkdownField value={record?.content} />
</Show>
);
};
interface IPost {
id: number;
content: string;
}
API Reference
Properties