A DOM parser for the react.js library, used for instantiating react components declaratively in your html.

This tool is to be used with a bundler such as browserfy but can be adpated for other use cases.

Installation

npm install react-dom-parser --save-dev

Example

html declaration

<div data-react-component="my-module" data-react-props=" name: 'simon staton', data: { age: 23 } " id="modules-wrapper"></div>

Before instantiating a react component you must first register it in the parsers registry.

// Require parser var parser = require('react-dom-parser'); // An example react component var myReactComponent = React.createClass({ render: function(){ return ... } }); // Register individually parser.register('my-module', myReactComponent); // Register multiples parser.register({ 'my-module': myReactComponent });

Once modules have been registered you may parse the DOM or any other DOM element to instantiate them

parser.parse(document.getElementsByTagName("BODY")[0]);

To retrieve a react components instance use the getByNode method

var myReactComponentInstance = parser.getByNode(document.getElementById('modules-wrapper'));

To check when parse is complete use the onParseComplete method