Render HTML as React element, possibly replacing dangerouslySetInnerHTML
Branch: master
Clone or download
Latest commit 0fc8344 Nov 9, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Remove camelcase dependency Sep 16, 2017
test Minor fixes in test Nov 10, 2017
.gitignore Initial commit Dec 17, 2015
.travis.yml Add .travis.yml Dec 19, 2015
LICENSE 2015 -> 2016 Jan 5, 2016
README.md New github handle name Sep 27, 2017
index.js Do not escape script content Sep 21, 2017
package-lock.json v0.6.0 Nov 10, 2017
package.json v0.6.0 Nov 10, 2017

README.md

react-render-html travis-ci

Render HTML as React element, possibly replacing dangerouslySetInnerHTML

How it works

It renders a provided HTML string into a React element.

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")
// => React Element
//    <a className="github" href="https://github.com"><b>GitHub</b></a>

It may be used in the render method in a React component:

let App = React.createClass({
  render() {
    return (
      <div className='app'>
        {renderHTML(someHTML)}
      </div>
    );
  }
});

Or just by itself

ReactDOM.render(renderHTML(someHTML), document.getElementById('app'));

If a provided HTML contains several top-level nodes, the function will return an array of React elements.

renderHTML('<li>hello</li><li>world</li>');
// => [React Element <li>hello</li>, React Element <li>world</li>]

Pros and cons

Pros

  • Can make use of React's reconciliation for plain HTML too
  • Fully compatible with JSX

Cons

  • It uses parse5 to parse HTML, which can result in large bundle size
  • Can result in slower rendering speed, mainly for parsing

Install

Install with NPM:

npm i --save react-render-html

Import with CommonJS or whatever:

const renderHTML = require('react-render-html');

import renderHTML from 'react-render-html';

A bug!

When a bug is found, please report them in Issues.

Also, any form of contribution(especially a PR) will absolutely be welcomed 🍻

License

MIT