react-tiny-markup

react-tiny-markup

This component aims to parse a simple markup language nontechnical users may input - typically <i> and <b> tags. It will never be a complete HTML5 parser (tag nesting validation, autoclosing tags - none of that). I wanted a smaller (~3kB vs ~60+kB) alternative to sanitize-html.

Security:

It only renders react component without using dangerouslySetInnerHTML, therefore it is secure (unless you use dangerouslySetInnerHTML yourself in the custom renderer)

Examples:

// replace or remove tags
const str = `
  <ooo>inner</ooo>
  <remove>invi<b>s</b>ible</remove>
  <b>left in</b>
`;
<ReactTinyMarkup
  renderer={p => {
    switch (p.tag) {
      case 'ooo':
        return createElement('c', { key: p.key }, p.children);
      case 'remove':
        return null;
      default:
        return createElement(p.tag, { key: p.key }, p.children);
    }
  }}
>
  {str}
</ReactTinyMarkup>
// <c>inner</c><b>left in</b>

// simply parse tags
const str = 'abc<strong>a</strong>b<i>c</i>d<b>e</b>';
<ReactTinyMarkup>{str}</ReactTinyMarkup>
// abc<strong>a</strong>b<i>c</i>d<b>e</b>

// rewrite tag (`strong` in this case) and simply parse the rest
<ReactTinyMarkup
  renderer={p =>
    p.tag === 'strong' ? (
      <i key={p.key}>{p.children}</i>
    ) : (
      defaultRenderer(p)
    )
  }
>
  {str}
</ReactTinyMarkup>
// abc<i>a</i>b<i>c</i>d<b>e</b>