Use React Dom Polyfill to support React 0.12+

Author: ovidiuch

lib/Codemirror.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom-polyfill')(React);
+var findDOMNode = ReactDOM.findDOMNode;
 var className = require('classnames');
 var debounce = require('lodash.debounce');
 
@@ -10,11 +12,12 @@ var CodeMirror = React.createClass({
 	propTypes: {
 		onChange: React.PropTypes.func,
 		onFocusChange: React.PropTypes.func,
+		onScroll: React.PropTypes.func,
 		options: React.PropTypes.object,
 		path: React.PropTypes.string,
 		value: React.PropTypes.string,
 		className: React.PropTypes.any,
-		codeMirrorInstance: React.PropTypes.object
+		codeMirrorInstance: React.PropTypes.func
 	},
 	getCodeMirrorInstance: function getCodeMirrorInstance() {
 		return this.props.codeMirrorInstance || require('codemirror');
@@ -25,12 +28,13 @@ var CodeMirror = React.createClass({
 		};
 	},
 	componentDidMount: function componentDidMount() {
-		var textareaNode = this.refs.textarea;
+		var textareaNode = findDOMNode(this.refs.textarea);
 		var codeMirrorInstance = this.getCodeMirrorInstance();
 		this.codeMirror = codeMirrorInstance.fromTextArea(textareaNode, this.props.options);
 		this.codeMirror.on('change', this.codemirrorValueChanged);
 		this.codeMirror.on('focus', this.focusChanged.bind(this, true));
 		this.codeMirror.on('blur', this.focusChanged.bind(this, false));
+		this.codeMirror.on('scroll', this.scrollChanged);
 		this.codeMirror.setValue(this.props.defaultValue || this.props.value || '');
 	},
 	componentWillUnmount: function componentWillUnmount() {
@@ -65,6 +69,9 @@ var CodeMirror = React.createClass({
 		});
 		this.props.onFocusChange && this.props.onFocusChange(focused);
 	},
+	scrollChanged: function scrollChanged(cm) {
+		this.props.onScroll && this.props.onScroll(cm.getScrollInfo());
+	},
 	codemirrorValueChanged: function codemirrorValueChanged(doc, change) {
 		if (this.props.onChange && change.origin != 'setValue') {
 			this.props.onChange(doc.getValue());

package.json

@@ -23,10 +23,14 @@
     "happiness": "^1.0.7",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
-    "react-component-gulp-tasks": "^0.7.7"
+    "react-component-gulp-tasks": "^0.7.7",
+    "react-dom-polyfill": "^1.0.0-beta.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0"
+    "react": ">=0.12 <16"
+  },
+  "optionalDependencies": {
+    "react-dom": "<16"
   },
   "browserify-shim": {
     "react": "global:React"

src/Codemirror.js

@@ -1,4 +1,6 @@
 const React = require('react');
+const ReactDOM = require('react-dom-polyfill')(React);
+const findDOMNode = ReactDOM.findDOMNode;
 const className = require('classnames');
 const debounce = require('lodash.debounce');
 
@@ -22,7 +24,7 @@ const CodeMirror = React.createClass({
 		};
 	},
 	componentDidMount () {
-		const textareaNode = this.refs.textarea;
+		const textareaNode = findDOMNode(this.refs.textarea);
 		const codeMirrorInstance = this.getCodeMirrorInstance();
 		this.codeMirror = codeMirrorInstance.fromTextArea(textareaNode, this.props.options);
 		this.codeMirror.on('change', this.codemirrorValueChanged);