pass a React ref of the ad slot element

jaanauati · Oct 23, 2019 · 62c0d96 · 62c0d96
1 parent ef2808b
commit 62c0d96
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/js/adslot.js b/js/adslot.js
@@ -49,6 +49,7 @@ export class AdSlot extends React.Component {
       slotId: this.props.slotId || null,
       className: this.props.className || '',
     };
+    this.adElementRef = React.createRef ? React.createRef() : null;
   }
 
   componentDidMount() {
@@ -137,7 +138,12 @@ export class AdSlot extends React.Component {
   slotRenderEnded(eventData) {
     if (eventData.slotId === this.getSlotId()) {
       if (this.props.onSlotRender !== undefined) {
-        this.props.onSlotRender(eventData);
+        // now that slot has rendered we have access to the ref
+        const params = {
+          ...eventData,
+          adElementRef: this.adElementRef,
+        };
+        this.props.onSlotRender(params);
       }
     }
   }
@@ -148,6 +154,7 @@ export class AdSlot extends React.Component {
         slotId: this.getSlotId(),
         sizes: this.props.sizes,
         slotCount: dynamicAdCount,
+        adElementRef: this.adElementRef,
       });
     }
   }
@@ -189,7 +196,7 @@ export class AdSlot extends React.Component {
 
     return (
       <div className={this.getClasses().join(' ').trim()}>
-        <div {...props} />
+        <div ref={this.adElementRef} {...props} />
       </div>
     );
   }

diff --git a/lib/adslot.js b/lib/adslot.js
@@ -17,6 +17,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -64,6 +66,7 @@ function (_React$Component) {
       slotId: _this.props.slotId || null,
       className: _this.props.className || ''
     };
+    _this.adElementRef = _react.default.createRef ? _react.default.createRef() : null;
     return _this;
   }
 
@@ -170,7 +173,12 @@ function (_React$Component) {
     value: function slotRenderEnded(eventData) {
       if (eventData.slotId === this.getSlotId()) {
         if (this.props.onSlotRender !== undefined) {
-          this.props.onSlotRender(eventData);
+          // now that slot has rendered we have access to the ref
+          var params = _objectSpread({}, eventData, {
+            adElementRef: this.adElementRef
+          });
+
+          this.props.onSlotRender(params);
         }
       }
     }
@@ -181,7 +189,8 @@ function (_React$Component) {
         this.props.onSlotRegister({
           slotId: this.getSlotId(),
           sizes: this.props.sizes,
-          slotCount: dynamicAdCount
+          slotCount: dynamicAdCount,
+          adElementRef: this.adElementRef
         });
       }
     }
@@ -230,7 +239,9 @@ function (_React$Component) {
 
       return _react.default.createElement("div", {
         className: this.getClasses().join(' ').trim()
-      }, _react.default.createElement("div", props));
+      }, _react.default.createElement("div", _extends({
+        ref: this.adElementRef
+      }, props)));
     }
   }]);