react-html5-parser

Work still in progress

Install

npm install react-html5-parser
// or
yarn add react-html5-parser

Use

To read

import { parse } from "react-html5-parser";
// Parse element
parse("<div>Lorem ipsum</div>");
// return createElement(React.Fragment, {}, React.createElement("div", {}, "Lorem ipsum"))
// Parse element inside the string
parse("Lorem <div>ipsum</div>");
// return createElement(React.Fragment, {}, ["Lorem ", React.createElement("div", {}, "ipsum")])

API

parse (html: string, options = {}) => React.Fragment | null

Arguments

Return

sanitize (html: string) => string

import { parse } from "react-html5-parser";
import dompurify from "dompurify";
// trim string
parse("<div>Lorem ipsum</div>", { sanitize: (html: string) => html.trim() });
// sanitize with dompurify
parse("<div>Lorem ipsum</div>", {
 sanitize: (html: string) => dompurify.sanitize(html),
});

components { [key: string]: (props: {}) => ReactNode }

function Typography(props) {
 return <span {...props} />;
}
// replace div with paragraph, and b with Typography
parse("<div>Lorem <b>ipsum</b></div>", {
 components: {
 div: (props) => <p {...props} />,
 b: Typography,
 },
});

<>
 <p>
 Lorem <span>ipsum</span>
 </p>
</>

mapNode (node: Node, key: number | string, options = {}) => Node | ReactNode }

import { parse, renderNode, renderNodes } from "react-html5-parser";
parse("<div>Lorem <b>ipsum</b></div>", {
 mapNode: (node: Node, key: string | number, options = {}) => {
 // return renderNode(node); // render node as react node
 // return renderNodes(node.childNodes); // render only childNodes
 return node;
 },
});

mapElement (element: ReactElement, options = {}) => ReactNode }

parse("<div>Lorem <b>ipsum</b></div>", {
 mapElement: (element: ReactElement, options = {}) => {
 if (element.type === "p") {
 return <element.type {...element.props} />;
 }
 return element;
 },
});

attrsMap { [key: string]: string }

import { parse, parseAttrs, SVG_ATTRIBUTES } from "react-html5-parser";
// need for the correct parsing svg attributes
const svgAttrsMap = parseAttrs(SVG_ATTRIBUTES);
// map custom attrs, convert classname to class
const customMap = { classname: "class" };
parse("<div>Lorem <b>ipsum</b></div>", {
 attrsMap: { ...svgAttrsMap, ...customMap },
});

onError (error: unknown, html: unknown) => void

// if we provide incorrect html, or get internal error
const res: null = parse(undefined, {
 onError: (error: unknown, html: unknown) => {
 bugsnag.notify(error, (event) => {
 event.addMetadata("htmlparser", { html });
 });
 },
});