Support

Client-side
Server-side

Preview

Use a simple Markdown tag to support Markdown in your document.

1import { Markdown } from "@fileforge/react-print";
2
3<Markdown>{`# Hello, world!
4
5> This is a blockquote
6
7---
8
9This is a paragraph with a [link](https://google.com)`}</Markdown>;

Examples

Custom Components and Variables

You can leverage the overrides prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.

1import { Markdown } from "@fileforge/react-print";
2
3<Markdown
4 options={{
5 overrides: {
6 Title: {
7 component: () => "Non-Disclosure Agreement",
8 },
9 CustomerName: {
10 component: () => "John Doe",
11 },
12 KPI: {
13 component: ({ children }) => (
14 <div style={{ color: "blue", fontSize: "2rem" }}>{children}</div>
15 ),
16 },
17 },
18 }}
19>{`# <Title />
20
21This agreement is signed with <CustomerName />.
22
23<KPI>20/month</KPI>`}</Markdown>;