Remove deprecation warning in react 15.6.0 about React.DOM.noscript

Widen · Jun 15, 2017 · 91e1a67 · 91e1a67
1 parent 937f835
commit 91e1a67
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
           <div>
@@ -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 };
       },