react-safe

Safe JSX: syntactic sugar over dangerouslySetInnerHTML

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-safe
1301.3.04 years ago5 years agoMinified + gzip package size for react-safe in KB

Readme

React Safe
This package provides a syntactic sugar over the raw dangerousSetInnerHTML.

Motivation

In real projects, at least in my experience, the usage of dangerousSetInnerHTML is extensive. Which brings two problems:
  1. It's too long and ugly for its frequency. Also JSX does not look like HTML anymore as tag contents
are passed via attributes. Which kinda defeats the usage point of JSX.
  1. The term "dangerous" is misleading. It represents something a programmer considers safe(!)
instead. So it kinda spams the vision with irrelevant signals of false danger decreasing the capability to notice real threats.

Examples

React (vanilla)

<h1 dangerouslySetInnerHTML={{__html: page.title}}></h1>
<div dangerouslySetInnerHTML={{__html: renderMD(page.body)}}></div>

React Safe

<Safe.h1>{page.title}</Safe.h1>
<Safe.div>{renderMD(page.body)}</Safe.div>

License

MIT