Skip to content

Latest commit

 

History

History
86 lines (65 loc) · 2.06 KB

installation.mdx

File metadata and controls

86 lines (65 loc) · 2.06 KB
Raw
title description
Installation
Install from your command line

With yarn

yarn add md-to-react-email

With npm

npm install md-to-react-email

Usage

The `ReactEmailMarkdown` component can be imported directly into your react-email email template as a component.

Example usage:

import {Section} from "@react-email/components"
import {ReactEmailMarkdown} from "md-to-react-email"

export default function EmailTemplate() {
return (
  <Email>
    <Head />
    <Section>
      <ReactEmailMarkdown markdown={`# Hello, World!`} />
    </Section>
  </Email>
)
}
The `parseMarkdownToReactEmailJSX` function can parse markdown to valid HTML that can be pasted directly into your email template.

Example usage:

import {parseMarkdownToReactEmailJSX} from "md-to-react-email"

const markdown = `# Hello World`
const parsedReactMail = parseMarkdownToReactEmailJSX({markdown})
const parsedReactMailWithDataAttributes =
  parseMarkdownToReactEmailJSX({markdown, withDataAttr: true})

console.log(parsedReactMail)
// `<h1 style="...valid inline CSS...">Hello, World!</h1>`

console.log(parsedReactMailWithDataAttributes)
// `<h1 data-id="react-email-heading"
// style="...valid inline CSS...">
// Hello, World!
// </h1>`

Components

md-to-react-email contains pre-defined react-email and html components for the email template structure and styling. You can modify these components to customize the look and feel of your email template.

The following components are available for customization:

  • Headers: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • BlockQuotes
  • Text: paragraphs, bold and italic text
  • Links: <a>
  • Code: Code blocks and inline code
  • Lists: <ul>, <li>
  • Image: <img>
  • Line-breaks: <br>
  • Horizontal-rule: <hr>
  • Table: <table>, <thead>, <tbody>, <th>, <td>, <tr>
  • Strikethrough