@react-email/markdown
v0.0.12
Published
Convert Markdown to valid React Email template code.
Downloads
1,239,190
Readme
Install
Install component from your command line.
With yarn
yarn add @react-email/markdown -EWith npm
npm install @react-email/markdown -EGetting started
Add the component around your email body content.
import { Markdown } from "@react-email/markdown";
import { Html } from "@react-email/html";
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 field
- Type: string
Contains the markdown content that will be rendered in the email template.
markdownCustomStyles field
- Type: object
- Default:
{}
Provide custom styles for the corresponding HTML element (e.g., p, h1, h2, etc.).
markdownContainerStyles field
- Type: object
- Default:
{}
Provide custom styles for the containing div that wraps the markdown content.
Support
This component was tested using the most popular email clients.
| | | | | | | | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
License
MIT License