$ npm install --save html-to-react

Examples

$3

The following example parses each node and its attributes and returns a tree of React elements.

`javascript
var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

var htmlInput = '

assert.equal(reactHtml, htmlInput); // true
`

$3

If certain DOM nodes require specific processing, for example if you want to capitalize each


tag, the following example demonstrates this:

`javascript
var ReactDOMServer = require('react-dom/server');
var HtmlToReact = require('html-to-react');
var HtmlToReactParser = require('html-to-react').Parser;

var htmlInput = '

Title

Paragraph

Another title

';
var htmlExpected = '

TITLE

Paragraph

ANOTHER TITLE

';

var isValidNode = function () {
return true;
};

// Order matters. Instructions are processed in the order they're defined
var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
var processingInstructions = [
{
// Custom

processing
shouldProcessNode: function (node) {
return node.parent && node.parent.name && node.parent.name === 'h1';
},
processNode: function (node, children) {
return node.data.toUpperCase();
}
},
{
// Anything else
shouldProcessNode: function (node) {
return true;
},
processNode: processNodeDefinitions.processDefaultNode
}
];
var htmlToReactParser = new HtmlToReactParser();
var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode,
processingInstructions);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent);
assert.equal(reactHtml, htmlExpected);
`

$3

There may be a situation where you want to replace the children of an element with a React
component. This is beneficial if you want to:
- a) Preserve the containing element
- b) Not rely on any child node to insert your React component

#### Example

Below is a simple template that could get loaded via ajax into your application

##### Before
`


Sample Heading

Sample Text


`

##### After

You may want to extract the inner html from the data-container attribute, store it and then pass
it as a prop to your injected RichTextEditor.

`


Sample heading

Sample Text

"} />