react-frame-component 5.1.0 → 5.2.2-alpha.1

package/README.md

@@ -75,7 +75,32 @@ lifecycle calls. This set of lifecycle calls are sometimes triggered after the
 lifecycle of the parent component, so these callbacks provide a hook to know
 when the frame contents are mounted and updated.
 
-###### Accessing the iframe's window and document
+###### ref
+`ref: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ])`
+
+The `ref` prop provides a way to access inner iframe DOM node. To utilitize this prop use, for example, one of the React's built-in methods to create a ref: [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`React.useRef()`](https://reactjs.org/docs/hooks-reference.html#useref).
+
+```js
+const MyComponent = (props) => {
+  const iframeRef = React.useRef();
+
+  React.useEffect(() => {
+    // Use iframeRef for:
+    // - focus managing
+    // - triggering imperative animations
+    // - integrating with third-party DOM libraries
+    iframeRef.current.focus()
+  }, [])
+
+  return (
+    <Frame ref={iframeRef}>
+      <InnerComponent />
+    </Frame>
+  );
+}
+```
+
+##### Accessing the iframe's window and document
 The iframe's `window` and `document` may be accessed via the `FrameContextConsumer` or the `useFrame` hook.
 
 The example with `FrameContextConsumer`:

package/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-frame-component';

package/lib/Frame.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Frame = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -34,7 +35,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var Frame = function (_Component) {
+var Frame = exports.Frame = function (_Component) {
   _inherits(Frame, _Component);
 
   // React warns when you render directly into the body since browser extensions
@@ -47,14 +48,26 @@ var Frame = function (_Component) {
     var _this = _possibleConstructorReturn(this, (Frame.__proto__ || Object.getPrototypeOf(Frame)).call(this, props, context));
 
     _this.setRef = function (node) {
-      _this.node = node;
+      _this.nodeRef.current = node;
+
+      var forwardedRef = _this.props.forwardedRef; // eslint-disable-line react/prop-types
+
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
     };
 
     _this.handleLoad = function () {
-      _this.setState({ iframeLoaded: true });
+      // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox
+      if (!_this.state.iframeLoaded) {
+        _this.setState({ iframeLoaded: true });
+      }
     };
 
     _this._isMounted = false;
+    _this.nodeRef = _react2.default.createRef();
     _this.state = { iframeLoaded: false };
     return _this;
   }
@@ -65,10 +78,9 @@ var Frame = function (_Component) {
       this._isMounted = true;
 
       var doc = this.getDoc();
-      if (doc && doc.readyState === 'complete') {
-        this.forceUpdate();
-      } else {
-        this.node.addEventListener('load', this.handleLoad);
+
+      if (doc) {
+        this.nodeRef.current.contentWindow.addEventListener('DOMContentLoaded', this.handleLoad);
       }
     }
   }, {
@@ -76,12 +88,12 @@ var Frame = function (_Component) {
     value: function componentWillUnmount() {
       this._isMounted = false;
 
-      this.node.removeEventListener('load', this.handleLoad);
+      this.nodeRef.current.removeEventListener('load', this.handleLoad);
     }
   }, {
     key: 'getDoc',
     value: function getDoc() {
-      return this.node ? this.node.contentDocument : null; // eslint-disable-line
+      return this.nodeRef.current ? this.nodeRef.current.contentDocument : null; // eslint-disable-line
     }
   }, {
     key: 'getMountTarget',
@@ -142,6 +154,7 @@ var Frame = function (_Component) {
       delete props.mountTarget;
       delete props.contentDidMount;
       delete props.contentDidUpdate;
+      delete props.forwardedRef;
       return _react2.default.createElement(
         'iframe',
         _extends({}, props, { ref: this.setRef, onLoad: this.handleLoad }),
@@ -171,4 +184,6 @@ Frame.defaultProps = {
   contentDidUpdate: function contentDidUpdate() {},
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 };
-exports.default = Frame;
+exports.default = _react2.default.forwardRef(function (props, ref) {
+  return _react2.default.createElement(Frame, _extends({}, props, { forwardedRef: ref }));
+});

package/lib/index.js

@@ -3,7 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFrame = exports.FrameContextConsumer = exports.FrameContext = undefined;
+
+var _Frame = require('./Frame');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Frame).default;
+  }
+});
 
 var _Context = require('./Context');
 
@@ -26,10 +34,4 @@ Object.defineProperty(exports, 'useFrame', {
   }
 });
 
-var _Frame = require('./Frame');
-
-var _Frame2 = _interopRequireDefault(_Frame);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _Frame2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-frame-component",
-  "version": "5.1.0",
+  "version": "5.2.2-alpha.1",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "index.d.ts"
   ],
   "scripts": {
     "precommit": "lint-staged",