Dom to React
dom-to-react
is a replacement for React's own method dangerouslySetInnerHTML
.
It lets you build a React structure from a regular HTML-Dom. Your React application is aware of all elements wthin the added DOM, and it even lets you initialize your own React components anywhere inside that structure.
dom-to-react is very lightweight. It does not use any further third party modules.
How to install
Use npm (or your preferred package manager)
npm install --save-dev dom-to-react
Simple usage
It takes a regular Dom-Node as entrypoint from which it creates the according React-elements (by calling React.createElement()
) recursively. So the simplest way is:
A Paragraph
;;; const d2r = ;const rootNode = document; ;
This will create the initial DOM structure, but now all elements are React elements. Easy, isn't it?
Advanced usage
when creating an instance of Dom2React, a configuration can be provided which allows to manipulate and handle the original DOM:
const d2r = options;
where options
is an array with instruction objects with each 2-3 callback functions
all the functions are being passed the following params:
@param {node}
the node being tested/manipulated@param {key}
the React-key which would be assigned when the node renders (always in the format${level}-${index}
)@param {level}
the level how deep in the DOM the nod is nested (an integer)@param {parser}
the parser itself
var options = // If this function returns true, the two following functions are called as long as they are defined // This function must always return true or false { return nodenodeName === 'div'; } // This function can be used for easy manipulations to the node, e.g. for removing or adding attributes // This function must always return a DOM-Node (even if it's a new one created by document.createElement) { return document; } //This function is used to inject your own components into the parsed DOM // This function must return an object which can be rendered by React (a react element or null) { return React; } ;
Example instructions
div
s:
Add a class to all { return nodenodeName === 'div';} ) { nodeclassName += ' a-class-added'; return node; }
div
s with a certain class:
Remove all { return nodeclassName >= 0;} ) { return null; }
react-markdown-component):
Initialize a react component for all nodes of a certain type (e.g. the return {nodenodeName === 'pre'} { return <ReactMarkdown key=key source=nodeinnerText />; }
transform one node-type into another (e.g. ul=>ol) but preserve all childnodes:
{ return nodenodeName === 'ul'} { var ol = document; for var i = nodechildNodeslength - 1; i >= 0; i-- ol; return ol; }
Initialize a more complex component with an object parsed from a JSON within a HTML comment. (That's actually what I used this for 👍)
<!-- { ...complex JSON-object } -->
{ return nodeclassName >= 0;} { var props = false; for var i = nodechildNodeslength - 1; i >= 0; i-- if childNodenodeType === 8 props = JSON; return <ComplexComponent ...props />; }
Demo
To see the included demo in action, clone/download this repo and
npm inpm run start
and open
http://localhost:8080/