react-frame-component - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/Frame.js

@@ -114,2 +114,6 @@ 'use strict';
       if (doc && doc.readyState === 'complete') {
+        if (doc.querySelector('div') === null) {
+          this._setInitialContent = false;
+        }
+
         var win = doc.defaultView || doc.parentView;
@@ -116,0 +120,0 @@ var initialRender = !this._setInitialContent;

package.json

 {
   "name": "react-frame-component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -82,2 +82,19 @@ # 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.
+
+```
+const MyComponent = (props, context) => {
+  const {
+    document: iframeDocument,
+    window: iframeWindow
+  } = context;
+  return (<...rendered jsx.../>);
+};
+MyComponent.contextTypes = {
+  window: PropTypes.any,
+  document: PropTypes.any
+};
+```
+
 ## More info
@@ -84,0 +101,0 @@

src/Frame.jsx

@@ -93,2 +93,6 @@ import React, { Component, PropTypes } from 'react';
     if (doc && doc.readyState === 'complete') {
+      if (doc.querySelector('div') === null) {
+        this._setInitialContent = false;
+      }
+
       const win = doc.defaultView || doc.parentView;
@@ -95,0 +99,0 @@ const initialRender = !this._setInitialContent;

test/Frame.spec.jsx

@@ -271,2 +271,45 @@ import React, { PropTypes } from 'react';
   });
+
+  it('should not error when parent components are reused', () => {
+    div = document.body.appendChild(document.createElement('div'));
+    const component = ReactDOM.render(
+      <ul className="container">
+        <li key="1">
+          <Frame>
+            <p>Text 1</p>
+          </Frame>
+        </li>
+        <li key="2">
+          <Frame>
+            <p>Text 2</p>
+          </Frame>
+        </li>
+      </ul>,
+      div
+    );
+
+    const iframes1 = ReactDOM.findDOMNode(component).querySelectorAll('iframe');
+    expect(iframes1[0].contentDocument.body.querySelector('p').textContent).to.equal('Text 1');
+    expect(iframes1[1].contentDocument.body.querySelector('p').textContent).to.equal('Text 2');
+
+    const component2 = ReactDOM.render(
+      <ul className="container">
+        <li key="2">
+          <Frame>
+            <p>Text 2</p>
+          </Frame>
+        </li>
+        <li key="1">
+          <Frame>
+            <p>Text 1</p>
+          </Frame>
+        </li>
+      </ul>,
+      div,
+    );
+
+    const iframes2 = ReactDOM.findDOMNode(component2).querySelectorAll('iframe');
+    expect(iframes2[0].contentDocument.body.querySelector('p').textContent).to.equal('Text 2');
+    expect(iframes2[1].contentDocument.body.querySelector('p').textContent).to.equal('Text 1');
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

216195

increased by0.89%

Lines of code

676

increased by7.13%

Number of lines in readme file

119

increased by16.67%

No dependency changes