diff --git a/README.md b/README.md index aef7202..1c21353 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,10 @@ Require: ```js Input = require('react-input-placeholder')(React).Input; Textarea = require('react-input-placeholder')(React).Textarea; + +// React >= 14.0.0 +Input = require('react-input-placeholder')(React, ReactDom).Input; +Textarea = require('react-input-placeholder')(React, ReactDom).Textarea; ``` ### No module diff --git a/src/react-input-placeholder.js b/src/react-input-placeholder.js index 5a2372a..6905f10 100644 --- a/src/react-input-placeholder.js +++ b/src/react-input-placeholder.js @@ -5,7 +5,7 @@ var isPlaceholderSupported = (typeof document !== 'undefined') * Input is a wrapper around React.DOM.input with a `placeholder` shim for IE9. * NOTE: only supports "controlled" inputs (http://facebook.github.io/react/docs/forms.html#controlled-components) */ -var createShimmedElement = function(React, elementConstructor, name) { +var createShimmedElement = function(React, _getDOMNode, elementConstructor, name) { return React.createClass({ displayName: name, @@ -97,7 +97,7 @@ var createShimmedElement = function(React, elementConstructor, name) { }, componentDidUpdate: function() { - this.setSelectionIfNeeded(this.getDOMNode()); + this.setSelectionIfNeeded(this.getDOMNode && this.getDOMNode() || _getDOMNode(this)); }, render: function() { @@ -141,16 +141,25 @@ var createShimmedElement = function(React, elementConstructor, name) { }); }; -module.exports = function(React) { +module.exports = function(React, ReactDom) { + var _domNode; + if (React.findDOMNode) { + _domNode = React.findDOMNode; + } else if (ReactDom && ReactDom.findDOMNode) { + _domNode = ReactDom.findDOMNode; + } else { + throw new Error("constructor(): Seems you are using React >= 14.0.0. It requires ReactDom as second argument."); + } + if (!('createElement' in React)) { /* start -- to be removed in 2.0.0 */ return { - Input: createShimmedElement(React, React.DOM.input, 'Input'), - Textarea: createShimmedElement(React, React.DOM.textarea, 'Textarea') + Input: createShimmedElement(React, _domNode, React.DOM.input, 'Input'), + Textarea: createShimmedElement(React, _domNode, React.DOM.textarea, 'Textarea') }; } else { /* -- end */ return { - Input: createShimmedElement(React, 'input', 'Input'), - Textarea: createShimmedElement(React, 'textarea', 'Textarea') + Input: createShimmedElement(React, _domNode, 'input', 'Input'), + Textarea: createShimmedElement(React, _domNode, 'textarea', 'Textarea') }; } }; diff --git a/src/umd.js b/src/umd.js index c69162b..2b75602 100644 --- a/src/umd.js +++ b/src/umd.js @@ -1,9 +1,9 @@ /*global define*/ var reactInputPlaceholder = require('./react-input-placeholder'); if (typeof define === 'function' && define.amd) { - define(['react'], function (React) { - return reactInputPlaceholder(React); + define(['react', 'react-dom'], function (React, ReactDom) { + return reactInputPlaceholder(React, ReactDom); }); } else { - window.PlaceholderShim = reactInputPlaceholder(window.React); -} \ No newline at end of file + window.PlaceholderShim = reactInputPlaceholder(window.React, window.ReactDom); +}