react-frame-component - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

lib/Frame.js

@@ -23,6 +23,4 @@ 'use strict';
 
-var _DocumentContext = require('./DocumentContext');
+var _Context = require('./Context');
 
-var _DocumentContext2 = _interopRequireDefault(_DocumentContext);
-
 var _Content = require('./Content');
@@ -115,4 +113,4 @@
         _react2.default.createElement(
-          _DocumentContext2.default,
-          { document: doc, window: win },
+          _Context.FrameContextProvider,
+          { value: { document: doc, window: win } },
           _react2.default.createElement(
@@ -119,0 +117,0 @@ 'div',

lib/index.js

@@ -6,3 +6,13 @@ 'use strict';
 });
+exports.FrameContextConsumer = undefined;
 
+var _Context = require('./Context');
+
+Object.defineProperty(exports, 'FrameContextConsumer', {
+  enumerable: true,
+  get: function get() {
+    return _Context.FrameContextConsumer;
+  }
+});
+
 var _Frame = require('./Frame');
@@ -9,0 +19,0 @@

package.json

 {
   "name": "react-frame-component",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
@@ -70,4 +70,4 @@ "main": "lib/index.js",
     "prop-types": "^15.5.9",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
     "rimraf": "^2.5.4",
@@ -82,5 +82,5 @@ "sinon": "2.0.0-pre",
     "prop-types": "^15.5.9",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": ">= 16.3",
+    "react-dom": ">= 16.3"
   }
 }

README.md

@@ -79,18 +79,20 @@ # React <Frame /> component
 ###### Accessing the iframe's window and document
-The iframe's `window` and `document` may be accessed via the React context values `window` and `document` respectively.
+The iframe's `window` and `document` may be accessed via the FrameContextConsumer.
 
 ```js
-const MyComponent = (props, context) => {
-  const {
-    document: iframeDocument,
-    window: iframeWindow
-  } = context;
+import Frame, { FrameContextConsumer } from 'react-frame-component'
 
-  return (<...rendered jsx.../>);
-};
+const MyComponent = (props, context) => (
+  <Frame>
+    <FrameContextConsumer>
+      {
+        // Callback is invoked with iframe's window and document instances
+        ({document, window}) => {
+          // Render Children
+        }
+      }
+    </FrameContextConsumer>
+  </Frame>
+);
 
-MyComponent.contextTypes = {
-  window: PropTypes.any,
-  document: PropTypes.any
-};
 ```
@@ -97,0 +99,0 @@

src/Frame.jsx

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import DocumentContext from './DocumentContext';
+import { FrameContextProvider } from './Context';
 import Content from './Content';
@@ -91,7 +91,7 @@
       <Content contentDidMount={contentDidMount} contentDidUpdate={contentDidUpdate}>
-        <DocumentContext document={doc} window={win}>
+        <FrameContextProvider value={{ document: doc, window: win }}>
           <div className="frame-content">
             {this.props.children}
           </div>
-        </DocumentContext>
+        </FrameContextProvider>
       </Content>
@@ -98,0 +98,0 @@ );

src/index.js

 import Frame from './Frame';
 
+export { FrameContextConsumer } from './Context';
+
 export default Frame;

test/Frame.spec.jsx

@@ -104,3 +104,3 @@ import React from 'react';
     expect(head.querySelectorAll('link').length).to.equal(2);
-    expect(head.querySelectorAll('script').length).to.equal(1);
+    expect(head.querySelectorAll('script').length).to.equal(1, 'expected 1 script tag');
   });
@@ -235,4 +235,4 @@
 
-    expect(didMount.callCount).to.equal(1);
-    expect(didUpdate.callCount).to.equal(0);
+    expect(didMount.callCount).to.equal(1, 'expected 1 didMount');
+    expect(didUpdate.callCount).to.equal(0, 'expected 0 didUpdate');
   });
@@ -242,3 +242,2 @@
     div = document.body.appendChild(document.createElement('div'));
-
     const didMount = sinon.spy();
@@ -250,13 +249,12 @@ const didUpdate = sinon.spy();
 
+    expect(didMount.callCount).to.equal(1, 'expected 1 didMount');
     frame.setState({ foo: 'bar' }, () => {
-      expect(didMount.callCount).to.equal(1);
-      expect(didUpdate.callCount).to.equal(1);
-      done();
+      expect(didMount.callCount).to.equal(1, 'expected 1 didMount');
+      expect(didUpdate.callCount).to.equal(1, 'expected 1 didUpdate');
+      frame.setState({ foo: 'gah' }, () => {
+        expect(didMount.callCount).to.equal(1, 'expected 1 didMount');
+        expect(didUpdate.callCount).to.equal(2, 'expected 2 didUpdate');
+        done();
+      });
     });
-
-    frame.setState({ foo: 'gah' }, () => {
-      expect(didMount.callCount).to.equal(1);
-      expect(didUpdate.callCount).to.equal(1);
-      done();
-    });
   });
@@ -263,0 +261,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2197329

increased by475.87%

Number of package files

23

increased by15%

Lines of code

19240

increased by2405.21%

Number of lines in readme file

119

increased by1.71%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes