Newton's Preposterous Miscalculation
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    html-react-parserpublic

    html-react-parser

    NPM

    NPM version Build Status Coverage Status Dependency status

    An HTML to React parser:

    Parser(htmlString[, options])
    

    The parser converts an HTML string to React Element(s).

    There is also an option to replace element(s) with your own React Element(s) via the parser options.

    Example

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

    JSFiddle

    Installation

    NPM:

    npm install html-react-parser --save

    Yarn:

    yarn add html-react-parser

    CDN:

    <!-- HTMLReactParser depends on React -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>

    See examples.

    Usage

    Given that you have the following imported:

    // ES Modules
    import Parser from 'html-react-parser';
    import { render } from 'react-dom';

    You can render an element:

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

    You can render multiple elements:

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

    You can render nested elements:

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

    The parser will also preserve attributes:

    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 that has the same output as htmlparser2.parseDOM.

    The element is only replaced if a valid React Element is returned.

    // with JSX
    Parser('<p id="replace">text</p>', {
        replace: function(domNode) {
            if (domNode.attribs && domNode.attribs.id === 'replace') {
                return <span>replaced</span>;
            }
        }
    });

    Advanced example (keep the replaced children):

    // with ES6 and JSX
     
    // converts DOM object to React Elements
    import domToReact from 'html-react-parser/lib/dom-to-react';
     
    const html = `
        <div>
            <p id="main">
                <span class="prettify">
                    keep me and make me pretty!
                </span>
            </p>
        </div>
    `;
     
    const parserOptions = {
        replace: (domNode) => {
            // do not replace if element has no attributes
            if (!domNode.attribs) return;
     
            if (domNode.attribs.id === 'main') {
                return (
                    <span style={{ fontSize: '42px' }}>
                        {domToReact(domNode.children, options)}
                    </span>
                );
     
            } else if (domNode.attribs.class === 'prettify') {
                return (
                    <span style={{ color: 'hotpink' }}>
                        {domToReact(domNode.children, options)}
                    </span>
                );
            }
        }
    };
     
    render(
        Parser(html, parserOptions),
        document.getElementById('root')
    );

    It will output the following:

    <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

    Release

    $ npm run release
    $ npm publish
    $ git push --follow-tags

    Special Thanks

    License

    MIT

    install

    npm i html-react-parser

    Downloadsweekly downloads

    8,497

    version

    0.4.6

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar