react-tiny-markup
v0.3.0
Published
Parse strings with tags into react components
Downloads
1,263
Maintainers
Readme
react-tiny-markup
This component aims to parse a simple markup language nontechnical users may input - typically <i>
, <b>
and <img />
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.
Security:
It doesn't use dangerouslySetInnerHTML
.
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>
// Parse tags with attributes
const str = 'Look at this <em class="red">dog</em> <img src="dog.jpg" alt="my dog" />';
<ReactTinyMarkup
allowedAttributes={{ img: '', alt: '', class: 'className' }}
>
{str}
</ReactTinyMarkup>
// renders
// <>Look at this <em className="red">dog</em> <img src="dog.jpg" alt="my dog" /></>