@react-email/markdown
Version:
Convert Markdown to valid React Email template code.
93 lines (64 loc) • 3.72 kB
Markdown
<div align="center"><strong>@react-email/markdown</strong></div>
<div align="center">Convert Markdown to valid React Email template code.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a>
<span> · </span>
<a href="https://react.email">Documentation</a>
<span> · </span>
<a href="https://react.email">Twitter</a>
</div>
## Install
Install component from your command line.
#### With yarn
```sh
yarn add @react-email/markdown -E
```
#### With npm
```sh
npm install @react-email/markdown -E
```
## Getting started
Add the component around your email body content.
```jsx
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.
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
## License
MIT License