support react v16

akiran · Oct 7, 2017 · 388c8ec · 388c8ec
1 parent 798da1d
commit 388c8ec
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -28,8 +28,7 @@
   "homepage": "https://github.com/akiran/react-highlight",
   "dependencies": {
     "highlight.js": "^9.11.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react": "^15.5.4"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 import hljs from 'highlight.js';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 class Highlight extends React.Component {
     componentDidMount() {
@@ -12,32 +11,30 @@ class Highlight extends React.Component {
     }
 
     highlightCode() {
-        const domNode = ReactDOM.findDOMNode(this);
-        const nodes = domNode.querySelectorAll('pre code');
-
-        let i;
-        for (i = 0; i < nodes.length; i++) {
-            hljs.highlightBlock(nodes[i]);
-        }
+        const nodes = this.el.querySelectorAll('pre code');
+        nodes.forEach((node) => hljs.highlightBlock(node));
     }
 
+    setEl = (el) => {
+        this.el = el;
+    };
+
     render() {
-        const {children, className, element, innerHTML} = this.props;
-        let Element = element ? React.DOM[element] : null;
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
 
         if (innerHTML) {
-            if (!Element) {
-                Element = React.DOM.div
-            }
-
-            return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
-        } else {
+            props.dangerouslySetInnerHTML = { __html: children };
             if (Element) {
-                return Element({className}, children);
-            } else {
-                return <pre><code className={className}>{children}</code></pre>;
+                return <Element {...props} />;
             }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
         }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
     }
 }
 

diff --git a/src/optimized.js b/src/optimized.js
@@ -1,6 +1,5 @@
 import hljs from'highlight.js/lib/highlight';
 import React from'react';
-import ReactDOM from'react-dom';
 
 class Highlight extends React.Component {
     componentDidMount() {
@@ -13,8 +12,7 @@ class Highlight extends React.Component {
 
     highlightCode() {
         const {className, languages} = this.props;
-        const domNode = ReactDOM.findDOMNode(this);
-        const nodes = domNode.querySelectorAll('pre code');
+        const nodes = this.el.querySelectorAll('pre code');
 
         if ((languages.length === 0) && className) {
             languages.push(className);
@@ -24,29 +22,29 @@ class Highlight extends React.Component {
             hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
         });
 
-        let i;
-        for (i = 0; i < nodes.length; i++) {
-            hljs.highlightBlock(nodes[i]);
-        }
+        nodes.forEach((node) => hljs.highlightBlock(node));
     }
 
+    setEl = (el) => {
+        this.el = el;
+    };
+
     render() {
-        const {children, className, element, innerHTML} = this.props;
-        let Element = element ? React.DOM[element] : null;
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
 
         if (innerHTML) {
-            if (!Element) {
-                Element = React.DOM.div
-            }
-
-            return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
-        } else {
+            props.dangerouslySetInnerHTML = { __html: children };
             if (Element) {
-                return Element({className}, children);
-            } else {
-                return <pre><code className={className}>{children}</code></pre>;
+                return <Element {...props} />;
             }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
         }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
     }
 }