react-frame-component 5.0.1 → 5.2.2-alpha.0

package/README.md

@@ -75,8 +75,35 @@ 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
-The iframe's `window` and `document` may be accessed via the FrameContextConsumer.
+###### 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`:
 
 ```js
 import Frame, { FrameContextConsumer } from 'react-frame-component'
@@ -96,6 +123,25 @@ const MyComponent = (props, context) => (
 
 ```
 
+The example with `useFrame` hook:
+
+```js
+import Frame, { useFrame } from 'react-frame-component';
+
+const InnerComponent = () => {
+  // Hook returns iframe's window and document instances from Frame context
+  const { document, window } = useFrame();
+
+  return null;
+};
+
+const OuterComponent = () => (
+  <Frame>
+    <InnerComponent />
+  </Frame>
+);
+```
+
 ## More info
 
 I wrote a [blog post][blog-url] about building this component.

package/index.d.ts

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

package/lib/Context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FrameContextConsumer = exports.FrameContextProvider = exports.FrameContext = undefined;
+exports.FrameContextConsumer = exports.FrameContextProvider = exports.useFrame = exports.FrameContext = undefined;
 
 var _react = require('react');
 
@@ -22,6 +22,10 @@ if (typeof window !== 'undefined') {
 
 var FrameContext = exports.FrameContext = _react2.default.createContext({ document: doc, window: win });
 
+var useFrame = exports.useFrame = function useFrame() {
+  return _react2.default.useContext(FrameContext);
+};
+
 var FrameContextProvider = FrameContext.Provider,
     FrameContextConsumer = FrameContext.Consumer;
 exports.FrameContextProvider = FrameContextProvider;

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,7 +48,15 @@ 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 () {
@@ -55,6 +64,7 @@ var Frame = function (_Component) {
     };
 
     _this._isMounted = false;
+    _this.nodeRef = _react2.default.createRef();
     _this.state = { iframeLoaded: false };
     return _this;
   }
@@ -67,8 +77,10 @@ var Frame = function (_Component) {
       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,9 +154,10 @@ 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 }),
+        _extends({}, props, { ref: this.setRef }),
         this.state.iframeLoaded && this.renderFrameContents()
       );
     }
@@ -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.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');
 
@@ -19,11 +27,11 @@ Object.defineProperty(exports, 'FrameContextConsumer', {
     return _Context.FrameContextConsumer;
   }
 });
+Object.defineProperty(exports, 'useFrame', {
+  enumerable: true,
+  get: function get() {
+    return _Context.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.0.1",
+  "version": "5.2.2-alpha.0",
   "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",