react-tiny-markup

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

$3

It doesn't use dangerouslySetInnerHTML.

$3

``JSX
// replace or remove tags
const str =
inner
invisible
left in
;
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}

// innerleft in
`

`JSX
// simply parse tags
const str = 'abcabcde';
{str}
// abcabcde

// rewrite tag (strong in this case) and simply parse the rest
renderer={p =>
p.tag === 'strong' ? (
{p.children}
) : (
defaultRenderer(p)
)
}
>
{str}

// abcabcde
`

`JSX
// Parse tags with attributes
const str = 'Look at this dog ';
allowedAttributes={{ img: '', alt: '', class: 'className' }}
>
{str}

// renders
// <>Look at this dog
``