Install
Install component from your command line.
npm install @react-email/components -E
# or get the individual package
npm install @react-email/markdown -E
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
Contains the markdown content that will be rendered in the email template
Provide custom styles for the containing div that wraps the markdown content
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.
