• Stars
    star
    237
  • Rank 169,941 (Top 4 %)
  • Language
    TypeScript
  • License
    BSD 3-Clause Clea...
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

✉️ Display e-mails in your React.js projects. (Targets Gmail rendering.)

react-letter

workflow npm npm 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 <[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} />;

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.

More Repositories

1

filedrop-web

📲 WebRTC file transfer - React/TypeScript front end.
TypeScript
522
star
2

filedrop-ws

📲 WebRTC file transfer - WebSockets server.
TypeScript
112
star
3

pongloader

🏓 Pong in 512 bytes. (boot sector)
Assembly
87
star
4

react-var-ui

React component library for variable setting and preview.
TypeScript
69
star
5

2048

🎮 2048 clone (React/TypeScript/Redux). No canvas.
TypeScript
64
star
6

bfloader

🧠 Brainfuck IDE and interpreter in 512 bytes. (boot sector)
Assembly
47
star
7

imtool

🖼️ Client-side canvas-based image manipulation library.
TypeScript
40
star
8

flight

🕹 3D video game experiments. three.js, TypeScript, React, Redux and GLSL shaders at once.
TypeScript
27
star
9

typesocket

🌐 TypeScript WebSockets library.
TypeScript
25
star
10

droplol

📲 drop.lol CLI client for easy peer-to-peer file transfers.
TypeScript
21
star
11

letterparser

✉️ Isomorphic e-mail parser (with MIME support) written in TypeScript.
TypeScript
19
star
12

upload

⬆ Isomorphic TypeScript file upload library.
TypeScript
16
star
13

platinum.css

🖥️ Pixel perfect recreation of MacOS 9's Platinum UI. (Work in progress)
CSS
15
star
14

lettersanitizer

📧 DOM-based HTML email sanitizer for in-browser email rendering.
TypeScript
12
star
15

microMTA

✉️ node.js MTA library. (inbound mail only SMTP server)
TypeScript
10
star
16

fxGlue

💥 WebGL-based image effects library. (TypeScript)
TypeScript
8
star
17

inkball

🎱 TypeScript reimplementation of the game included with Windows Vista.
TypeScript
8
star
18

filedrop-docker

📦 docker-compose configuration for filedrop.
Shell
6
star
19

pasteoverflow

🎨 Paste StackOverflow snippets directly from your Command Palette. (VS Code)
TypeScript
6
star
20

catchmail-web

✉️ Self-hosted e-mail debugging tool. (React.js frontend/TypeScript)
TypeScript
5
star
21

vue-letter

✉️ Display HTML e-mails in your Vue projects. (Targets Gmail rendering.)
JavaScript
5
star
22

DUI

✏️ Developing under influence... (of SwiftUI) - Declarative UI syntax for JS.
5
star
23

react-nano-scrollbar

🖱️ Tiny React component for minimalist scrollbars, no external dependencies. (React.js/TypeScript)
TypeScript
5
star
24

photos-web

📸 React + TypeScript front-end for my photo storage app.
TypeScript
4
star
25

6502

🖥️ 6502 emulator (TypeScript)
JavaScript
3
star
26

nailit

🖼 Deprecated, see: https://github.com/mat-sz/imtool
TypeScript
3
star
27

WebAppSignature

✍️ A proposal for creating a system for client-side cryptographic validation of web application code and assets.
3
star
28

fitool

📂 TypeScript file functions library.
TypeScript
2
star
29

nailit-demo

📸 Demo for my nailit JS library. (React.js)
JavaScript
2
star
30

photos-api

📸 node.js/express.js back-end for my photo storage app.
JavaScript
2
star
31

tabcast

⚡️ TypeScript message passing (broadcasting) across multiple tabs of same origin.
TypeScript
2
star
32

infiniplayer

🎶 Infinite stream of music from YouTube. (CLI)
JavaScript
2
star
33

95wm

🖥️ Windows 95 inspired window manager for X11.
C++
2
star
34

util

🔧 A collection of programming-related utilities.
TypeScript
1
star
35

microIMAP

✉️ node.js IMAP client/server library.
TypeScript
1
star
36

jumpcall-web

📞 Quick WebRTC calls - React.js frontend (TypeScript).
TypeScript
1
star
37

lettercoder

✉️ Isomorphic Quoted-Printable (RFC 2045) and MIME word (RFC 2047) decoding library.
TypeScript
1
star
38

WebAppSignatureExtension

🧩 A Chrome/Firefox extension that enables WebAppSignature support.
TypeScript
1
star
39

drum-machine

🥁 React + TypeScript drum machine.
TypeScript
1
star
40

shadowbin-web

📝 Encrypted text hosting service (React.js/TypeScript frontend)
TypeScript
1
star
41

shadowbin-api

📝 Encrypted text hosting service (Backend)
TypeScript
1
star
42

plist

📝 An universal TypeScript library for handing Apple's Property Lists. Supports binary, text and XML plists; works well in both browser and node.
TypeScript
1
star
43

catchmail-ws

✉️ Self-hosted e-mail debugging tool. (WebSockets backend/TypeScript)
TypeScript
1
star
44

cra-template-mat-sz

📝 Personal React template (React, TypeScript, Redux, Redux-Saga, SCSS, Prettier)
TypeScript
1
star
45

apple2

🍎 Apple II emulator (TypeScript)
TypeScript
1
star
46

todo-api

📋 A project management app with support for multiple projects, users and lists. C# (asp.net core) backend.
C#
1
star
47

react-statusbar

📶 A simple React library for beautiful statusbars.
TypeScript
1
star
48

ebin

💿 Epic binary parser/serializer for TypeScript
TypeScript
1
star
49

media-api

📺 Unofficial API for multimedia websites. (node.js only)
TypeScript
1
star
50

tetris

🕹️ Tetris written in TypeScript using HTML5 canvas.
TypeScript
1
star
51

todo-web

📋 React + TypeScript front-end for my project management app.
TypeScript
1
star
52

SwiftUI-Clicker

📱SwiftUI experiments - an uninspired incremental game.
Swift
1
star
53

pongloader-v86

🏓 An online demo for pongloader.
JavaScript
1
star
54

matcrypt

🔐 Wrapper for WebCrypto designed to optimize certain tasks.
TypeScript
1
star