Components
Markdown
A Markdown component that converts markdown to valid react-email template code
Install
Install component from your command line.
Getting started
Add the component to your email template. Include styles where needed.
import { Markdown, Html } from "@react-email/components";
const Email = () => {
return (
<Html lang="en" dir="ltr">
<Markdown
markdownCustomStyles={{
h1: { color: "red" },
h2: { color: "blue" },
codeInline: { background: "grey" },
}}
markdownContainerStyles={{
padding: "12px",
border: "solid 1px black",
}}
>{`# Hello, World!`}</Markdown>
{/* OR */}
<Markdown children={`# This is a ~~strikethrough~~`} />
</Html>
);
};
Props
children
string
Contains the markdown content that will be rendered in the email template
markdownContainerStyles
object
default: "{}"Provide custom styles for the containing div that wraps the markdown content
markdownCustomStyles
object
default: "{}"Provide custom styles for the corresponding html element (p, h1, h2, etc.)
Note: Passing a custom style for an element overrides the default styles.
Support
All components were tested using the most popular email clients.
Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman