Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx
Swizzle Ready

Markdown

This field lets you display markdown content. It supports GitHub Flavored Markdown.

Swizzle

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
import { useShow } from "@refinedev/core";
import { Show, MarkdownField } from "@refinedev/mantine";
import { Title, Text } from "@mantine/core";

const SampleShow: React.FC = () => {
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