Skip to main content
πŸ‘€ Interested in the latest enterprise backend features of refine? πŸ‘‰ Join now and get early access!
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 React from "react";
import { useShow } from "@refinedev/core";
import {
Show,
TextFieldComponent as TextField,
MarkdownField,
} from "@refinedev/mui";
import { Stack, Typography } from "@mui/material";

const SampleShow = () => {
const { queryResult: { data, isLoading } } = useShow();
const record = data?.data;

return (
<Show isLoading={isLoading}>
<Stack gap={1}>
<Typography variant="body1" fontWeight="bold">
Title
</Typography>
<TextField value={record?.title} />
<Typography variant="body1" fontWeight="bold">
Content
</Typography>
<MarkdownField value={record?.content} />
</Stack>
</Show>
);
};

API Reference​

Properties​

Example​

Run on your local
npm create refine-app@latest -- --example input-custom