No more dangerouslySetInnerHTML, render HTML as React element.
npm install @elliottsj/react-render-htmlNo more dangerouslySetInnerHTML, render HTML as React element.
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 (
{renderHTML(someHTML)}
);
}
});
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('
// => [React Element
Pass a function as the 2nd argument to renderHTML to customize how nodes are rendered:`js
function middleware(renderNode) { / ... / }
renderHTML('
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:
`jsfunction 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('
', replaceHref);
console.log(renderToStaticMarkup(htmlElement));
//
`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('
', 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';
``When a bug is found, please report them in Issues.
Also, any form of contribution(especially a PR) will absolutely be welcomed :beers: