diff --git a/examples/basic/app.js b/examples/basic/app.js index 83ff3a1b..d0988f8f 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -1,12 +1,13 @@ var React = require('react'); var ReactDOM = require('react-dom'); var Modal = require('../../lib/index'); +var createReactClass = require('create-react-class'); var appElement = document.getElementById('example'); Modal.setAppElement('#example'); -var App = React.createClass({ +var App = createReactClass({ getInitialState: function() { return { modalIsOpen: false, modal2: false }; diff --git a/lib/components/Modal.js b/lib/components/Modal.js index dd56b6fb..a9d017e1 100644 --- a/lib/components/Modal.js +++ b/lib/components/Modal.js @@ -1,5 +1,6 @@ var React = require('react'); var ReactDOM = require('react-dom'); +var DOMFactories = require('react-dom-factories'); var PropTypes = require('prop-types'); var ExecutionEnvironment = require('exenv'); var ModalPortal = React.createFactory(require('./ModalPortal')); @@ -8,7 +9,7 @@ var refCount = require('../helpers/refCount'); var elementClass = require('element-class'); var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer; var Assign = require('lodash.assign'); -var createReactClass = require('create-react-class') +var createReactClass = require('create-react-class'); var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {}; var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}}; @@ -145,7 +146,7 @@ var Modal = createReactClass({ }, render: function () { - return React.DOM.noscript(); + return DOMFactories.noscript(); } }); diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index e9cfeff9..ec91d852 100644 --- a/lib/components/ModalPortal.js +++ b/lib/components/ModalPortal.js @@ -1,10 +1,12 @@ var React = require('react'); -var div = React.DOM.div; +var DOMFactories = require('react-dom-factories'); var focusManager = require('../helpers/focusManager'); var scopeTab = require('../helpers/scopeTab'); var Assign = require('lodash.assign'); var createReactClass = require('create-react-class'); +var div = DOMFactories.div; + // so that our CSS is statically analyzable var CLASS_NAMES = { overlay: 'ReactModal__Overlay', diff --git a/package.json b/package.json index bb37c856..431caee0 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "element-class": "^0.2.0", "exenv": "1.2.0", "lodash.assign": "^4.2.0", - "prop-types": "^15.5.7" + "prop-types": "^15.5.7", + "react-dom-factories": "^1.0.0" }, "peerDependencies": { "react": "^0.14.0 || ^15.0.0", diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 620df920..bbf13e72 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -5,6 +5,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import TestUtils from 'react-addons-test-utils'; import Modal from '../lib/components/Modal'; +import createReactClass from 'create-react-class'; import * as ariaAppHider from '../lib/helpers/ariaAppHider'; import { isBodyWithReactModalOpenClass, findDOMWithClass, @@ -62,7 +63,7 @@ describe('State', () => { it('renders into the body, not in context', () => { var node = document.createElement('div'); - var App = React.createClass({ + var App = createReactClass({ render() { return (
@@ -346,7 +347,7 @@ describe('State', () => { var node = document.createElement('div'); var modal = null; - var App = React.createClass({ + var App = createReactClass({ getInitialState: function () { return { testHasChanged: false }; },