` that contains a `data-report-id` attribute with an actual report,\nwhich was nothing more than a React component.\n\nSimply replacing the `
` elements with a React component would end up with multiple top-level\nReact components that have no common parent.\n\nThe **html-to-react** module solves this problem by parsing each DOM element and converting it to a\nReact tree with one single parent.\n\n## Installation\n\n`$ npm install --save html-to-react`\n\n## Examples\n\n### Simple\n\nThe following example parses each node and its attributes and returns a tree of React elements.\n\n```javascript\nconst ReactDOMServer = require('react-dom/server');\nconst HtmlToReactParser = require('html-to-react').Parser;\n\nconst htmlInput = '
';\nconst htmlToReactParser = new HtmlToReactParser();\nconst reactElement = htmlToReactParser.parse(htmlInput);\nconst reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);\n\nassert.equal(reactHtml, htmlInput); // true\n```\n\n### With Custom Processing Instructions\n\nIf certain DOM nodes require specific processing, for example if you want to capitalize each\n`
` tag, the following example demonstrates this:\n\n```javascript\nconst ReactDOMServer = require('react-dom/server');\nconst HtmlToReact = require('html-to-react');\nconst HtmlToReactParser = require('html-to-react').Parser;\n\nconst htmlInput = 'Title
Paragraph
Another title
TITLE
Paragraph
ANOTHER TITLE
processing\n shouldProcessNode: function (node) {\n return node.parent && node.parent.name && node.parent.name === 'h1';\n },\n processNode: function (node, children) {\n return node.data.toUpperCase();\n }\n },\n {\n // Anything else\n shouldProcessNode: function (node) {\n return true;\n },\n processNode: processNodeDefinitions.processDefaultNode\n }\n];\nconst htmlToReactParser = new HtmlToReactParser();\nconst reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode,\n processingInstructions);\nconst reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);\nassert.equal(reactHtml, htmlExpected);\n```\n\n### Replace the Children of an Element\n\nThere may be a situation where you want to replace the children of an element with a React\ncomponent. This is beneficial if you want to:\n- a) Preserve the containing element\n- b) Not rely on any child node to insert your React component\n\n#### Example\n\nBelow is a simple template that could get loaded via ajax into your application\n\n##### Before\n```html\n\n
\n
\n
Sample Heading
\n
Sample Text
\n
\n
\n
\n
\n
\n
Sample headingSample Text
\"} />\n \n
\n
\n
First
\n Second
\n\n```\n\nWe can accomplish that with the following script, using a combination of preprocessing and\ncustom processing instructions:\n\n```javascript\nconst React = require('react');\nconst HtmlToReact = require('html-to-react');\nconst HtmlToReactParser = require('html-to-react').Parser;\n\nconst htmlToReactParser = new HtmlToReactParser();\nconst htmlInput = '' +\n '
' +\n '
Sample For First
' +\n '
' +\n '
' +\n '
Sample For Second
' +\n '
' +\n'
' +\n '
First
' +\n 'Second
' +\n'';\n\nconst isValidNode = function () {\n return true;\n};\n\nconst preprocessingInstructions = [\n {\n shouldPreprocessNode: function (node) {\n return node.attribs && node.attribs['data-process'] === 'shared';\n },\n preprocessNode: function (node) {\n node.attribs = {id: `preprocessed-${node.attribs.id}`,};\n },\n }\n];\nconst processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);\nconst processingInstructions = [\n {\n shouldProcessNode: function (node) {\n return node.attribs && node.attribs.id === 'preprocessed-first';\n },\n processNode: function(node, children, index) {\n return React.createElement('h1', {key: index, id: node.attribs.id,}, 'First');\n },\n },\n {\n shouldProcessNode: function (node) {\n return node.attribs && node.attribs.id === 'preprocessed-second';\n },\n processNode: function (node, children, index) {\n return React.createElement('h2', {key: index, id: node.attribs.id,}, 'Second');\n },\n },\n {\n shouldProcessNode: function (node) {\n return true;\n },\n processNode: processNodeDefinitions.processDefaultNode,\n },\n];\n\nconst reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions,\n preprocessingInstructions);\nconst reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);\nassert.equal(reactHtml, htmlExpected);\n```\n\n## Tests & Coverage\n\nTest locally: `$ npm test`\n\nTest with coverage and report coverage to Coveralls: `$ npm run test-coverage`\n\nTest with coverage and open HTML report: `$ npm run test-html-coverage`\n","_attachments":{},"homepage":"https://github.com/aknuds1/html-to-react","bugs":{"url":"https://github.com/aknuds1/html-to-react/issues"},"license":"MIT"}