html-react-parser

What is html-react-parser?

The html-react-parser package is designed to convert HTML strings into React components. This is particularly useful when you need to dynamically render HTML content in a React application, such as content fetched from a CMS or API that returns HTML. It allows for custom handling of elements, attributes, and can work with server-side rendering.

What are html-react-parser's main functionalities?

Parsing HTML strings to React Elements

This feature allows you to convert a string of HTML into React elements that can be rendered inside a React component.

import parse from 'html-react-parser';
const html = '<div>Hello World</div>';
const reactElement = parse(html);

Replacing or modifying elements during parsing

This feature allows you to define a 'replace' function in the options object that can modify or replace elements during the parsing process.

import parse, { domToReact } from 'html-react-parser';
const html = '<p id="replace">Replace me</p>';
const options = {
  replace: ({ attribs, children }) => {
    if (attribs && attribs.id === 'replace') {
      return <span>{domToReact(children)}</span>;
    }
  }
};
const reactElement = parse(html, options);

Preserving custom attributes and event handlers

This feature allows you to preserve custom attributes and potentially event handlers when parsing HTML to React elements.

import parse from 'html-react-parser';
const html = '<div onclick="handleClick()">Click me</div>';
const reactElement = parse(html, {
  preserveAttributes: ['onclick']
});

Other packages similar to html-react-parser

react-html-parser

react-html-parser is similar to html-react-parser in that it converts HTML strings into React components. However, it may differ in the specifics of its API and the options it provides for customization during the parsing process.

dangerously-set-html-content

dangerously-set-html-content provides a component that can be used to set raw HTML content. It is similar to using the dangerouslySetInnerHTML prop in React but encapsulated in a component for easier use. It does not offer the same level of customization or parsing capabilities as html-react-parser.

sanitize-html-react

sanitize-html-react is designed to sanitize HTML strings before they are rendered to prevent XSS attacks. It can be used in conjunction with html-react-parser to first sanitize the HTML string and then parse it into React components. It focuses more on security rather than parsing.

README

html-react-parser

An HTML to React parser.

Parser(htmlString[, options])

The parser converts an HTML string to React element(s). You can also replace element(s) with your own custom React element(s) via the parser options.

Example

var Parser = require('html-react-parser');
var reactElement = (
    Parser('<p>Hello, world!</p>') // same as `React.createElement('p', {}, 'Hello, world!')`
);
require('react-dom').render(reactElement, document.getElementById('root'));

Installation

$ npm install html-react-parser

Usage

Render to DOM:

var Parser = require('html-react-parser');
var ReactDOM = require('react-dom');

// single element
ReactDOM.render(
    Parser('<p>single</p>'),
    document.getElementById('root')
);

// adjacent elements
ReactDOM.render(
    // the parser returns an array for adjacent elements
    // so make sure they are nested under a parent React element
    React.createElement('div', {}, Parser('<p>one</p><p>two</p>'))
    document.getElementById('root')
);

// nested elements
ReactDOM.render(
    Parser('<ul><li>inside</li></ul>'),
    document.getElementById('root')
);

// attributes are preserved
ReactDOM.render(
    Parser('<section id="foo" class="bar baz" data-qux="42">look at me now</section>'),
    document.getElementById('root')
);

Options

replace(domNode)

The replace method allows you to swap an element with your own React element.

The first argument is domNode, which is an object which shares the same schema as the output from htmlparser2.parseDOM.

Parser('<p id="replace">text</p>', {
    replace: function(domNode) {
        console.log(domNode);
        // {  type: 'tag',
        //    name: 'p',
        //    attribs: { id: 'replace' },
        //    children: [],
        //    next: null,
        //    prev: null,
        //    parent: null }

        return;
        // element is not replaced because
        // a valid React element is not returned
    }
});

Simple example:

var Parser = require('html-react-parser');
var React = require('react');

var html = (
    '<div>' +
        '<p id="replace">'
            'replace me' +
        '</p>' +
    '</div>'
);

var reactElement = Parser(html, {
    replace: function(domNode) {
        if (domNode.attribs && domNode.attribs.id === 'replace') {
            return React.createElement('span', {
                style: { fontSize: '42px' }
            }, 'replaced!');
            // equivalent jsx syntax:
            // return <span style={{ fontSize: '42px' }}>replaced!</span>;
        }
    }
});

require('react-dom').render(
    reactElement,
    document.getElementById('root')
);
// <div>
//     <span style="font-size: 42px;">
//         replaced!
//     </span>
// </div>

Advanced example (the replaced element's children are kept):

var Parser = require('html-react-parser');
var React = require('react');

// used for recursively parsing DOM created from the HTML
var domToReact = require('html-react-parser/lib/dom-to-react');

var html = (
    '<div>' +
        '<p id="main">' +
            '<span class="prettify">' +
                'keep me and make me pretty!' +
            '</span>' +
        '</p>' +
    '</div>'
);

var parserConfig = {
    replace: function(domNode) {
        var parsedChildren;
        if (domNode.attribs) {
            if (domNode.attribs.id === 'main') {
                // continue parsing domNode's children with same config
                parsedChildren = domToReact(domNode.children, parserConfig);
                return React.createElement('span', {
                    style: { fontSize: '42px' }
                }, parsedChildren);
                // equivalent jsx syntax:
                // return <span style={{ fontSize: '42px' }}>{parsedChildren}</span>;

            } else if (domNode.attribs.class === 'prettify') {
                // continue parsing domNode's children with same config
                parsedChildren = domToReact(domNode.children, parserConfig);
                return React.createElement('span', {
                    style: { color: 'hotpink' }
                }, parsedChildren);
                // equivalent jsx syntax:
                // return <span style={{ color: 'hotpink' }}>{parsedChildren}</span>;
            }
        }
    }
};

require('react-dom').render(
    Parser(html, parserConfig),
    document.getElementById('root')
);
// <div>
//     <span style="font-size: 42px;">
//         <span class="prettify" style="color: hotpink;">
//             keep me and make me pretty!
//         </span>
//     </span>
// </div>

Testing

$ npm test
$ npm run lint

Special Thanks

• To htmlparser2.
• To all the contributors.
• To benox3 and tdlm for their feedback and review.

License

MIT

Changelog

0.0.6 (2016-09-27)

Added

• README example with advanced usage of replace option from @poacher2k (#17)
• Contributors section to README (#21)

Changed

• Use webpack to build UMD bundle (#22)

Fixed

• Regex bug on client parser (#24)