react-frame-component - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

lib/Frame.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.Frame = undefined;
 
@@ -38,3 +39,3 @@ 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; };
 
-var Frame = function (_Component) {
+var Frame = exports.Frame = function (_Component) {
   _inherits(Frame, _Component);
@@ -52,3 +53,11 @@
     _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;
+      }
     };
@@ -61,2 +70,3 @@
     _this._isMounted = false;
+    _this.nodeRef = _react2.default.createRef();
     _this.state = { iframeLoaded: false };
@@ -75,3 +85,3 @@ return _this;
       } else {
-        this.node.addEventListener('load', this.handleLoad);
+        this.nodeRef.current.addEventListener('load', this.handleLoad);
       }
@@ -84,3 +94,3 @@ }
 
-      this.node.removeEventListener('load', this.handleLoad);
+      this.nodeRef.current.removeEventListener('load', this.handleLoad);
     }
@@ -90,3 +100,3 @@ }, {
     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
     }
@@ -152,2 +162,3 @@ }, {
       delete props.contentDidUpdate;
+      delete props.forwardedRef;
       return _react2.default.createElement(
@@ -182,2 +193,4 @@ 'iframe',
 };
-exports.default = Frame;
+exports.default = _react2.default.forwardRef(function (props, ref) {
+  return _react2.default.createElement(Frame, _extends({}, props, { forwardedRef: ref }));
+});

lib/index.js

@@ -6,4 +6,12 @@ 'use strict';
 });
-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');
@@ -30,8 +38,2 @@
 
-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.json

 {
   "name": "react-frame-component",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "index.ts"
   ],
@@ -9,0 +10,0 @@ "scripts": {

README.md

@@ -78,3 +78,28 @@ # React <Frame /> component
 
-###### 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.
@@ -81,0 +106,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20610

increased by7.38%

Number of package files

8

increased by14.29%

Lines of code

251

increased by6.36%

Number of lines in readme file

165

increased by17.86%

No dependency changes