Skip to content
This repository has been archived by the owner on May 4, 2020. It is now read-only.

Render HTML as React element, possibly replacing dangerouslySetInnerHTML

License

Notifications You must be signed in to change notification settings

hatashiro/react-render-html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-render-html travis-ci

Render HTML as React element, possibly replacing dangerouslySetInnerHTML

Deprecation

This library is no more maintained. Please use other libraries instead.

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

About

Render HTML as React element, possibly replacing dangerouslySetInnerHTML

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published