diff --git a/README.md b/README.md
index 3fad0cfa..4e83731a 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ Inside an app:
```js
var React = require('react');
+var ReactDOM = require('react-dom');
var Modal = require('react-modal');
var appElement = document.getElementById('your-app-element');
@@ -120,7 +121,7 @@ var App = React.createClass({
}
});
-React.render(, appElement);
+ReactDOM.render(, appElement);
```
# Demos
diff --git a/examples/basic/app.js b/examples/basic/app.js
index 9381eafa..58294ae8 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -1,4 +1,5 @@
var React = require('react');
+var ReactDOM = require('react-dom');
var Modal = require('../../lib/index');
var appElement = document.getElementById('example');
@@ -58,4 +59,4 @@ var App = React.createClass({
}
});
-React.render(, appElement);
+ReactDOM.render(, appElement);
diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js
index 75dff72b..064dbfc0 100644
--- a/examples/bootstrap/app.js
+++ b/examples/bootstrap/app.js
@@ -1,4 +1,5 @@
var React = require('react');
+var ReactDOM = require('react-dom');
var Modal = require('../../lib/index');
var appElement = document.getElementById('example');
@@ -64,4 +65,4 @@ var App = React.createClass({
}
});
-React.render(, appElement);
+ReactDOM.render(, appElement);
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
index 37da231a..34515094 100644
--- a/lib/components/Modal.js
+++ b/lib/components/Modal.js
@@ -1,5 +1,6 @@
var React = require('react');
-var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
+var ReactDOM = require('react-dom');
+var ExecutionEnvironment = require('exenv');
var ModalPortal = React.createFactory(require('./ModalPortal'));
var ariaAppHider = require('../helpers/ariaAppHider');
var elementClass = require('element-class');
@@ -50,7 +51,7 @@ var Modal = module.exports = React.createClass({
},
componentWillUnmount: function() {
- React.unmountComponentAtNode(this.node);
+ ReactDOM.unmountComponentAtNode(this.node);
document.body.removeChild(this.node);
},
@@ -65,10 +66,7 @@ var Modal = module.exports = React.createClass({
ariaAppHider.toggle(props.isOpen, props.appElement);
}
sanitizeProps(props);
- if (this.portal)
- this.portal.setProps(props);
- else
- this.portal = React.render(ModalPortal(props), this.node);
+ this.portal = ReactDOM.render(ModalPortal(props), this.node);
},
render: function () {
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
index 06ba9e1b..0e5e4dfb 100644
--- a/lib/components/ModalPortal.js
+++ b/lib/components/ModalPortal.js
@@ -103,7 +103,7 @@ var ModalPortal = module.exports = React.createClass({
},
open: function() {
- focusManager.setupScopedFocus(this.getDOMNode());
+ focusManager.setupScopedFocus(this.node);
focusManager.markForFocusLater();
this.setState({isOpen: true}, function() {
this.setState({afterOpen: true});
@@ -120,7 +120,7 @@ var ModalPortal = module.exports = React.createClass({
},
focusContent: function() {
- this.refs.content.getDOMNode().focus();
+ this.refs.content.focus();
},
closeWithTimeout: function() {
@@ -142,7 +142,7 @@ var ModalPortal = module.exports = React.createClass({
},
handleKeyDown: function(event) {
- if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content.getDOMNode(), event);
+ if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content, event);
if (event.keyCode == 27 /*esc*/) this.requestClose();
},
diff --git a/package.json b/package.json
index 4205e16c..fc47e28f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,10 @@
"karma-mocha": "0.2.0",
"karma-safari-launcher": "^0.1.1",
"mocha": "2.3.3",
- "react": ">=0.13.3",
+ "exenv": "1.2.0",
+ "react-addons-test-utils": "^0.14.0",
+ "react-dom": "^0.14.0",
+ "react": "^0.14.0",
"reactify": "^1.1.1",
"rf-release": "0.4.0",
"uglify-js": "2.4.24",
@@ -45,7 +48,7 @@
"lodash.assign": "^3.2.0"
},
"peerDependencies": {
- "react": ">=0.13.3 || ^0.14.0-beta3"
+ "react": "^0.14.0"
},
"tags": [
"react",
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index eeece65e..c3c4d074 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -1,9 +1,11 @@
require('./helper');
-var React = require('react/addons');
+var TestUtils = require('react-addons-test-utils');
+var React = require('react');
+var ReactDOM = require('react-dom');
var Modal = require('../lib/components/Modal');
-var Simulate = React.addons.TestUtils.Simulate;
+var Simulate = TestUtils.Simulate;
var ariaAppHider = require('../lib/helpers/ariaAppHider');
-var button = React.DOM.button;
+var button = ReactDOM.button;
describe('Modal', function () {
@@ -13,13 +15,13 @@ describe('Modal', function () {
it('can be open initially', function() {
var component = renderModal({isOpen: true}, 'hello');
- equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello');
+ equal(component.portal.refs.content.innerHTML.trim(), 'hello');
unmountModal();
});
it('can be closed initially', function() {
var component = renderModal({}, 'hello');
- equal(component.portal.getDOMNode().innerHTML.trim(), '');
+ equal(ReactDOM.findDOMNode(component.portal).innerHTML.trim(), '');
unmountModal();
});
@@ -27,21 +29,21 @@ describe('Modal', function () {
var app = document.createElement('div');
var node = document.createElement('div');
Modal.setAppElement(app);
- React.render(React.createElement(Modal, {isOpen: true}), node);
+ ReactDOM.render(React.createElement(Modal, {isOpen: true}), node);
equal(app.getAttribute('aria-hidden'), 'true');
ariaAppHider.resetForTesting();
- React.unmountComponentAtNode(node);
+ ReactDOM.unmountComponentAtNode(node);
});
it('accepts appElement as a prop', function() {
var el = document.createElement('div');
var node = document.createElement('div');
- React.render(React.createElement(Modal, {
+ ReactDOM.render(React.createElement(Modal, {
isOpen: true,
appElement: el
}), node);
equal(el.getAttribute('aria-hidden'), 'true');
- React.unmountComponentAtNode(node);
+ ReactDOM.unmountComponentAtNode(node);
});
it('renders into the body, not in context', function() {
@@ -51,82 +53,82 @@ describe('Modal', function () {
return React.DOM.div({}, React.createElement(Modal, {isOpen: true, ariaHideApp: false}, 'hello'));
}
});
- React.render(React.createElement(App), node);
+ ReactDOM.render(React.createElement(App), node);
var modalParent = document.body.querySelector('.ReactModalPortal').parentNode;
equal(modalParent, document.body);
- React.unmountComponentAtNode(node);
+ ReactDOM.unmountComponentAtNode(node);
});
it('renders children', function() {
var child = 'I am a child of Modal, and he has sent me here...';
var component = renderModal({isOpen: true}, child);
- equal(component.portal.refs.content.getDOMNode().innerHTML, child);
+ equal(component.portal.refs.content.innerHTML, child);
unmountModal();
});
it('has default props', function() {
var node = document.createElement('div');
Modal.setAppElement(document.createElement('div'));
- var component = React.render(React.createElement(Modal), node);
+ var component = ReactDOM.render(React.createElement(Modal), node);
var props = component.props;
equal(props.isOpen, false);
equal(props.ariaHideApp, true);
equal(props.closeTimeoutMS, 0);
- React.unmountComponentAtNode(node);
+ ReactDOM.unmountComponentAtNode(node);
ariaAppHider.resetForTesting();
});
it('removes the portal node', function() {
var component = renderModal({isOpen: true}, 'hello');
- equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello');
+ equal(component.portal.refs.content.innerHTML.trim(), 'hello');
unmountModal();
ok(!document.querySelector('.ReactModalPortal'));
});
it('focuses the modal content', function() {
renderModal({isOpen: true}, null, function () {
- strictEqual(document.activeElement, this.portal.refs.content.getDOMNode());
+ strictEqual(document.activeElement, this.portal.refs.content);
unmountModal();
});
});
it('supports custom className', function() {
var modal = renderModal({isOpen: true, className: 'myClass'});
- equal(modal.portal.refs.content.getDOMNode().className.indexOf('myClass') !== -1, true);
+ equal(modal.portal.refs.content.className.contains('myClass'), true);
unmountModal();
});
it('supports overlayClassName', function () {
var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'});
- equal(modal.portal.refs.overlay.getDOMNode().className.indexOf('myOverlayClass') !== -1, true);
+ equal(modal.portal.refs.overlay.className.contains('myOverlayClass'), true);
unmountModal();
});
it('supports adding style to the modal contents', function () {
var modal = renderModal({isOpen: true, style: {content: {width: '20px'}}});
- equal(modal.portal.refs.content.getDOMNode().style.width, '20px');
+ equal(modal.portal.refs.content.style.width, '20px');
});
it('supports overridding style on the modal contents', function() {
var modal = renderModal({isOpen: true, style: {content: {position: 'static'}}});
- equal(modal.portal.refs.content.getDOMNode().style.position, 'static');
+ equal(modal.portal.refs.content.style.position, 'static');
});
it('supports adding style on the modal overlay', function() {
var modal = renderModal({isOpen: true, style: {overlay: {width: '75px'}}});
- equal(modal.portal.refs.overlay.getDOMNode().style.width, '75px');
+ equal(modal.portal.refs.overlay.style.width, '75px');
});
it('supports overridding style on the modal overlay', function() {
var modal = renderModal({isOpen: true, style: {overlay: {position: 'static'}}});
- equal(modal.portal.refs.overlay.getDOMNode().style.position, 'static');
+ equal(modal.portal.refs.overlay.style.position, 'static');
});
it('adds class to body when open', function() {
var modal = renderModal({isOpen: false});
equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, false);
- modal.setProps({ isOpen: true});
+ modal = renderModal({isOpen: true});
equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, true);
modal = renderModal({isOpen: false});
@@ -146,13 +148,13 @@ describe('Modal', function () {
//it('adds --before-close for animations', function() {
//var node = document.createElement('div');
- //var component = React.render(React.createElement(Modal, {
+ //var component = ReactDOM.render(React.createElement(Modal, {
//isOpen: true,
//ariaHideApp: false,
//closeTimeoutMS: 50,
//}), node);
- //component = React.render(React.createElement(Modal, {
+ //component = ReactDOM.render(React.createElement(Modal, {
//isOpen: false,
//ariaHideApp: false,
//closeTimeoutMS: 50,
diff --git a/specs/helper.js b/specs/helper.js
index 2d23397c..62e88bc4 100644
--- a/specs/helper.js
+++ b/specs/helper.js
@@ -1,8 +1,8 @@
assert = require('assert');
-React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
var Modal = React.createFactory(require('../lib/components/Modal'));
-ReactTestUtils = React.addons.TestUtils;
ok = assert.ok;
equal = assert.equal;
strictEqual = assert.strictEqual;
@@ -14,11 +14,11 @@ renderModal = function(props, children, callback) {
props.ariaHideApp = false;
_currentDiv = document.createElement('div');
document.body.appendChild(_currentDiv);
- return React.render(Modal(props, children), _currentDiv, callback);
+ return ReactDOM.render(Modal(props, children), _currentDiv, callback);
};
unmountModal = function() {
- React.unmountComponentAtNode(_currentDiv);
+ ReactDOM.unmountComponentAtNode(_currentDiv);
document.body.removeChild(_currentDiv);
_currentDiv = null;
};