react-render-html 

No more dangerouslySetInnerHTML, render HTML as React element.

How it works

It renders a provided HTML string into a React element.

``js
import renderHTML from 'react-render-html';

renderHTML("GitHub")
// => React Element
// GitHub
`

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

`js
let App = React.createClass({
render() {
return (



);
}
});
`

Or just by itself
`js
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.

`js
renderHTML('

hello

world

');
// => [React Element

hello

, React Element

world

]
`

$3

Pass a function as the 2nd argument to renderHTML to customize how nodes are rendered:
`js
function middleware(renderNode) { / ... / }

renderHTML('

hello

world

', middleware);
`

The middleware function should have the signature
`js
type Middleware = (renderNode: NodeRenderer) => (next: NodeRenderer) => NodeRenderer
type NodeRenderer = (node: ASTNode., key: String) => ReactElement
`

Where next is the next renderer in the middleware chain, renderNode is the entire chain, and node and key correspond to the current node being rendered.

For example, to replace the href attribute of all elements, use:
`js

function replaceHref(renderNode) {
return next => (node, key) => {
const element = next(node, key);
if (node.tagName === 'a') {
return React.cloneElement(element, {
href: 'https://example.com'
});
}
return element;
};
}

const htmlElement = renderHTML('

hihi

', replaceHref);
console.log(renderToStaticMarkup(htmlElement));
//

hihi

`

Custom renders are composable: using applyMiddleware, simply call next from within a renderer to get the resulting ReactElement from subsequent renderers, and call renderNode if you need to render a node from scratch using the entire renderer chain (e.g. child nodes). For example:
`js
import renderHTML, {
applyMiddleware
} from 'react-render-html';

const replaceHref = renderNode => next => (node, key) => {
const element = next(node, key);
if (node.tagName === 'a') {
return React.cloneElement(element, {
href: 'https://example.com'
});
}
return element;
};
const replacePs = renderNode => next => (node, key) => {
if (node.tagName === 'p') {
return React.createElement(node.tagName, {}, 'Redacted');
}
return next(node, key);
};
const addLi = renderNode => next => (node, key) => {
const element = next(node, key);
if (node.tagName === 'ul') {
return React.cloneElement(
element,
{},
...node.childNodes.map(renderNode),
React.createElement('li', {}, 'One more')
);
}
return element;
};
const htmlElement = renderHTML(
'

' +
'
• hihi
' +
'

• helloworld

  react

' +
'

',
applyMiddleware(replaceHref, replacePs, addLi)
);

const htmlElement = renderHTML('

hihi

', replaceHref);
console.log(renderToStaticMarkup(htmlElement));
//

• hihi

• Redacted

  Redacted

• One more

`

Install

Install with NPM:

`
npm i --save react-render-html
`

Import with CommonJS or whatever:

`js
const {
default: renderHTML,
applyMiddleware
} = require('react-render-html');

// OR

import renderHTML, { applyMiddleware } 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 :beers:

License

MIT