Skip to main content
Version: 4.xx.xx
Swizzle Ready

Markdown

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

Good to know:

You can swizzle this component with the Refine CLI to customize it.

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

PropertyTypeDescription
value

string

Markdown data to render

Example

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