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.
• No dependencies except for React itself.

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:

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 <[email protected]>
To: B <[email protected]>
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} />;

sanitize function

react-letter also exposes a sanitize function that uses DOMParser to sanitize the HTML content of messages and returns HTML text. This allows for usage in other libraries without having to copy the code from react-letter.

interface SanitizerOptions {
  id?: string;
  dropAllHtmlTags?: boolean;
  rewriteExternalResources?: (url: string) => string;
  rewriteExternalLinks?: (url: string) => string;
  allowedSchemas?: string[];
  preserveCssPriority?: boolean;
  noWrapper?: boolean;
}

function sanitize(html: string, text?: string, options?: SanitizerOptions);

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.