npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

html-react-parser

0.7.0 • Public • Published

html-react-parser

NPM

NPM version Build Status Coverage Status Dependency status

An HTML to React parser that works on both the server and the browser:

HTMLReactParser(htmlString[, options])

The parser converts an HTML string to React element(s). If you want to replace an element with your own custom element, there's an option to do that.

Example:

var parse = require('html-react-parser');
parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`

CodeSandbox | JSFiddle | repl.it

See usage and examples.

Installation

NPM:

$ npm install html-react-parser --save

Yarn:

$ yarn add html-react-parser

unpkg (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>
<script>
  window.HTMLReactParser(/* string */);
</script> 

Usage

Given you have html-react-parser imported:

// ES Modules
import parse from 'html-react-parser';

Parse single element:

parse('<h1>single</h1>');

Parse multiple elements:

parse('<p>sibling 1</p><p>sibling 2</p>');

Because the parser returns an array for adjacent elements, make sure it's nested under a parent element when rendered:

import React, { Component } from 'react';
import parse from 'html-react-parser';
 
class App extends Component {
  render() {
    return <div>{parse('<p>sibling 1</p><p>sibling 2</p>')}</div>;
  }
}

Parse nested elements:

parse('<ul><li>text</li></ul>');

Parse element with attributes:

parse('<hr id="foo" class="bar" data-baz="qux">');

Options

replace(domNode)

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

The first argument is domNode―an object with the same output as htmlparser2's domhandler.

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

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

The following example uses replace to modify the children:

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import parse from 'html-react-parser';
import domToReact from 'html-react-parser/lib/dom-to-react';
 
const elements = parse(
  `
  <p id="main">
    <span class="prettify">
      keep me and make me pretty!
    </span>
  </p>
`,
  {
    replace: ({ attribs, children }) => {
      if (!attribs) return;
 
      if (attribs.id === 'main') {
        return (
          <h1 style={{ fontSize: 42 }}>
            {domToReact(children, parserOptions)}
          </h1>
        );
      } else if (attribs.class === 'prettify') {
        return (
          <span style={{ color: 'hotpink' }}>
            {domToReact(children, parserOptions)}
          </span>
        );
      }
    }
  }
);
 
console.log(renderToStaticMarkup(elements));

The output:

<h1 style="font-size:42px">
  <span style="color:hotpink">keep me and make me pretty!</span>
</h1>

The following example uses replace to exclude an element:

parse('<p><br id="remove"></p>', {
  replace: ({ attribs }) =>
    attribs && attribs.id === 'remove' && <React.Fragment />
});

FAQ

Is the library XSS safe?

No, this library does not sanitize against XSS (Cross-Site Scripting). See #94.

Are <script> tags parsed?

Although <script> tags are parsed, react-dom does not render the contents. See #98.

My HTML attributes aren't getting called.

That's because inline event handlers like onclick are parsed as a string rather than a function. See #73.

Testing

$ npm test
$ npm run lint # npm run lint:fix 

Benchmarks

$ npm run test:benchmark

Here's an example output of the benchmarks run on a MacBook Pro 2017:

html-to-react - Single x 415,186 ops/sec ±0.92% (85 runs sampled)
html-to-react - Multiple x 139,780 ops/sec ±2.32% (87 runs sampled)
html-to-react - Complex x 8,118 ops/sec ±2.99% (82 runs sampled)

Release

Only collaborators with credentials can release and publish:

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

Special Thanks

License

MIT

install

npm i html-react-parser

Downloadsweekly downloads

55,869

version

0.7.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability