React-letter NPM

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} />;