react-letter is a React.js component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should match what is supported by Gmail.
Features:
-
<style>support. - Automatic removal of relative URLs.
- Support for rewriting the link and resource URLs to increase user's privacy and security.
- Prefixing classes and IDs to prevent clashing with page styles.
- Wrapping contents in an iframe (as an option).
- First-class TypeScript support (the entire library is written in TypeScript), along with a related RFC 822 parser project also written in TypeScript.
- Only one dependency (lettersanitizer).
The component itself is parser-agnostic, and can be used with any RFC 822 parser as long as it provides HTML or text output. The sanitization is done on the client-side using DOMParser with some security features targeting older browsers (although there's no guarantee of full functionality under browser versions older than 5 years).
Check other TypeScript e-mail projects:
| Parser | Inbound SMTP |
|---|---|
| letterparser | microMTA |
Installation
react-letter is available on NPM, and can be installed with either npm or yarn:
yarn add react-letter
A Vue.js version is also available: vue-letter.
Usage
See: Example or play in the CodeSandbox.
react-letter can be used with letterparser (currently in development, but it's the only RFC 822 parser with browser support as far as I know) or any other parser like this:
import { Letter } from 'react-letter';
import { extract } from 'letterparser';
const { html, text } = extract(`Date: Wed, 01 Apr 2020 00:00:00 -0000
From: A <a@example.com>
To: B <b@example.com>
Subject: Hello world!
Mime-Version: 1.0
Content-Type: text/html; charset=utf-8
Some message.`);
// No sanitization needs to be performed beforehand,
// react-letter takes care of sanitizing the input.
<Letter html={html} text={text} />;Configuration
Letter supports the following properties:
useIframe?: boolean;
Should the HTML be wrapped in an iframe. Default: false.
iframeTitle?: string;
Iframe title, usually set to subject of the message.
rewriteExternalResources?: (url: string) => string;
The result of this function will be used to rewrite the URLs for url(...) in CSS and src attributes in HTML.
rewriteExternalLinks?: (url: string) => string;
The result of this function will be used to rewrite the URLs for href attributes in HTML.
allowedSchemas?: string[];
List of allowed URL schemas. Default: ['http', 'https', 'mailto'].
preserveCssPriority?: boolean;
Preserves CSS priority (!important), default: true.
className?: string;
Class name of the wrapper div.