exoclick-react - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/components/Outstream/Outstream.d.ts

@@ -16,8 +16,7 @@ import PropTypes from 'prop-types';
     maxWidth: PropTypes.Requireable<number>;
-    zoneId: PropTypes.Validator<string | number>;
+    zoneId: PropTypes.Validator<string | number>; /**
+     * Once closed, stay hidden for this amount of minutes. Defaults to 0.
+     */
     sub: PropTypes.Requireable<string | number>;
     sub2: PropTypes.Requireable<string | number>;
-    /**
-     * Maximum width of video in pixels. Defaults to 100%.
-     */
     sub3: PropTypes.Requireable<string | number>;
@@ -24,0 +23,0 @@ keywords: PropTypes.Requireable<string[]>;

dist/index.cjs.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var ReactDOM = require('react-dom');
 var PropTypes = require('prop-types');
@@ -12,31 +13,85 @@
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+const propTypes$2 = {
+    children: PropTypes__default['default'].func.isRequired,
+};
+const style = {
+    width: '1px',
+    height: '1px',
+    position: 'absolute',
+    left: '-10000px',
+    top: '-1000px',
+    boxSizing: 'content-box',
+    borderWidth: '0px',
+};
+const Adblock = React__default['default'].memo(function Adblock({ children }) {
+    const id = Math.floor(Math.random() * (10000 - 123 + 1)) + 123;
+    const [blocked, setBlocked] = React.useState(false);
+    const iframeRef = React.useCallback((iframe) => {
+        const isBlocked = iframe === null ||
+            iframe.style.display === 'none' ||
+            iframe.style.display === 'hidden' ||
+            iframe.style.visibility === 'hidden' ||
+            iframe.offsetParent === null ||
+            iframe.offsetHeight === 0 ||
+            iframe.offsetLeft === 0 ||
+            iframe.offsetTop === 0 ||
+            iframe.offsetWidth === 0 ||
+            iframe.clientHeight === 0 ||
+            iframe.clientWidth === 0;
+        setBlocked(isBlocked);
+    }, []);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        children({ blocked }),
+        ReactDOM__default['default'].createPortal(React__default['default'].createElement("iframe", { ref: iframeRef, id: `adsbox_ex_${id}`, className: "adsBox pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links", width: "1px", height: "1px", style: style }), document.body)));
+});
+Adblock.propTypes = propTypes$2;
+
 const loadingMap = new Map();
-function useScript(src) {
+const defaultOptions = {
+    inline: false,
+    batch: true,
+};
+function useScript(src, options = {}) {
+    options = Object.assign(Object.assign({}, defaultOptions), options);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
-        const state = loadingMap.get(src);
-        if (state !== undefined) {
-            if (state === 'done') {
-                setLoading(false);
-            }
-            else {
-                state.then(() => {
+        if (options.batch) {
+            const state = loadingMap.get(src);
+            if (state !== undefined) {
+                if (state === 'done') {
                     setLoading(false);
-                });
+                }
+                else {
+                    state.then(() => {
+                        setLoading(false);
+                    });
+                }
+                return;
             }
-            return;
         }
         const script = document.createElement('script');
-        const promise = new Promise((resolve) => {
-            script.onload = () => {
+        if (options.inline) {
+            loadingMap.set(src, Promise.resolve());
+            setLoading(true);
+            queueMicrotask(() => {
+                loadingMap.set(src, 'done');
                 setLoading(false);
-                loadingMap.set(src, 'done');
-                resolve();
-            };
-        });
-        loadingMap.set(src, promise);
-        setLoading(true);
-        script.src = src;
+            });
+            script.text = src;
+        }
+        else {
+            const promise = new Promise((resolve) => {
+                script.onload = () => {
+                    setLoading(false);
+                    loadingMap.set(src, 'done');
+                    resolve();
+                };
+            });
+            loadingMap.set(src, promise);
+            setLoading(true);
+            script.src = src;
+        }
         document.body.appendChild(script);
@@ -75,3 +130,3 @@ return () => {
 
-const propTypes = Object.assign({}, baseProps);
+const propTypes$1 = Object.assign({}, baseProps);
 const Banner = React__default['default'].memo(function Banner({ zoneId, sub, sub2, sub3, keywords }) {
@@ -102,3 +157,3 @@ React.useEffect(() => {
 });
-Banner.propTypes = propTypes;
+Banner.propTypes = propTypes$1;
 
@@ -170,3 +225,57 @@ Object.assign(Object.assign({}, baseProps), {
 
+const propTypes = Object.assign(Object.assign({}, baseProps), { 
+    /**
+     * The format of the banner. This must be the same value as configured in ExoClick.
+     */
+    format: PropTypes__default['default'].oneOf(['728x90', '300x250', '160x600', '900x250'])
+        .isRequired, 
+    /**
+     * Vertical position. Defaults to bottom.
+     */
+    verticalPosition: PropTypes__default['default'].oneOf(['top', 'middle', 'bottom']), 
+    /**
+     * Horizontal position. Defaults to center.
+     */
+    horizontalPosition: PropTypes__default['default'].oneOf(['left', 'center', 'right']) });
+const StickyBanner = React__default['default'].memo(function StickyBanner({ zoneId, format, horizontalPosition = 'center', verticalPosition = 'bottom', sub, sub2, sub3, keywords, }) {
+    const [width, height] = format.split('x');
+    let script = `
+    var ad_idzone = "${zoneId}";
+    var ad_width = "${width}";
+    var ad_height = "${height}";
+    var v_pos = "${verticalPosition}";
+    var h_pos = "${horizontalPosition}";
+  `;
+    if (sub) {
+        script += `var ad_sub = ${sub};`;
+    }
+    if (sub2) {
+        script += `var ad_sub2 = ${sub2};`;
+    }
+    if (sub3) {
+        script += `var ad_sub3 = ${sub3};`;
+    }
+    if (keywords) {
+        script += `var ad_tags = ${keywords.join(',')};`;
+    }
+    const { loading: loadingInline } = useScript(script, { inline: true });
+    const { loading: loadingExternal } = useScript(`https://a.realsrv.com/js.php?t=17&idzone=${zoneId}`, {
+        batch: false,
+    });
+    React.useEffect(() => {
+        if (loadingInline || loadingExternal) {
+            return;
+        }
+        return () => {
+            var _a;
+            (_a = document.getElementById(`sticky-banner-${zoneId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    });
+    return null;
+});
+StickyBanner.propTypes = propTypes;
+
+exports.Adblock = Adblock;
 exports.Banner = Banner;
 exports.Outstream = Outstream;
+exports.StickyBanner = StickyBanner;

dist/index.d.ts

@@ -0,2 +1,4 @@
+export { Adblock } from './components/Adblock/Adblock';
 export { Banner } from './components/Banner/Banner';
 export { Outstream } from './components/Outstream/Outstream';
+export { StickyBanner } from './components/StickyBanner/StickyBanner';

dist/index.esm.js

@@ -1,31 +0,85 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
+const propTypes$2 = {
+    children: PropTypes.func.isRequired,
+};
+const style = {
+    width: '1px',
+    height: '1px',
+    position: 'absolute',
+    left: '-10000px',
+    top: '-1000px',
+    boxSizing: 'content-box',
+    borderWidth: '0px',
+};
+const Adblock = React.memo(function Adblock({ children }) {
+    const id = Math.floor(Math.random() * (10000 - 123 + 1)) + 123;
+    const [blocked, setBlocked] = useState(false);
+    const iframeRef = useCallback((iframe) => {
+        const isBlocked = iframe === null ||
+            iframe.style.display === 'none' ||
+            iframe.style.display === 'hidden' ||
+            iframe.style.visibility === 'hidden' ||
+            iframe.offsetParent === null ||
+            iframe.offsetHeight === 0 ||
+            iframe.offsetLeft === 0 ||
+            iframe.offsetTop === 0 ||
+            iframe.offsetWidth === 0 ||
+            iframe.clientHeight === 0 ||
+            iframe.clientWidth === 0;
+        setBlocked(isBlocked);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        children({ blocked }),
+        ReactDOM.createPortal(React.createElement("iframe", { ref: iframeRef, id: `adsbox_ex_${id}`, className: "adsBox pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links", width: "1px", height: "1px", style: style }), document.body)));
+});
+Adblock.propTypes = propTypes$2;
+
 const loadingMap = new Map();
-function useScript(src) {
+const defaultOptions = {
+    inline: false,
+    batch: true,
+};
+function useScript(src, options = {}) {
+    options = Object.assign(Object.assign({}, defaultOptions), options);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
-        const state = loadingMap.get(src);
-        if (state !== undefined) {
-            if (state === 'done') {
-                setLoading(false);
-            }
-            else {
-                state.then(() => {
+        if (options.batch) {
+            const state = loadingMap.get(src);
+            if (state !== undefined) {
+                if (state === 'done') {
                     setLoading(false);
-                });
+                }
+                else {
+                    state.then(() => {
+                        setLoading(false);
+                    });
+                }
+                return;
             }
-            return;
         }
         const script = document.createElement('script');
-        const promise = new Promise((resolve) => {
-            script.onload = () => {
+        if (options.inline) {
+            loadingMap.set(src, Promise.resolve());
+            setLoading(true);
+            queueMicrotask(() => {
+                loadingMap.set(src, 'done');
                 setLoading(false);
-                loadingMap.set(src, 'done');
-                resolve();
-            };
-        });
-        loadingMap.set(src, promise);
-        setLoading(true);
-        script.src = src;
+            });
+            script.text = src;
+        }
+        else {
+            const promise = new Promise((resolve) => {
+                script.onload = () => {
+                    setLoading(false);
+                    loadingMap.set(src, 'done');
+                    resolve();
+                };
+            });
+            loadingMap.set(src, promise);
+            setLoading(true);
+            script.src = src;
+        }
         document.body.appendChild(script);
@@ -64,3 +118,3 @@ return () => {
 
-const propTypes = Object.assign({}, baseProps);
+const propTypes$1 = Object.assign({}, baseProps);
 const Banner = React.memo(function Banner({ zoneId, sub, sub2, sub3, keywords }) {
@@ -91,3 +145,3 @@ useEffect(() => {
 });
-Banner.propTypes = propTypes;
+Banner.propTypes = propTypes$1;
 
@@ -159,2 +213,54 @@ Object.assign(Object.assign({}, baseProps), {
 
-export { Banner, Outstream };
+const propTypes = Object.assign(Object.assign({}, baseProps), { 
+    /**
+     * The format of the banner. This must be the same value as configured in ExoClick.
+     */
+    format: PropTypes.oneOf(['728x90', '300x250', '160x600', '900x250'])
+        .isRequired, 
+    /**
+     * Vertical position. Defaults to bottom.
+     */
+    verticalPosition: PropTypes.oneOf(['top', 'middle', 'bottom']), 
+    /**
+     * Horizontal position. Defaults to center.
+     */
+    horizontalPosition: PropTypes.oneOf(['left', 'center', 'right']) });
+const StickyBanner = React.memo(function StickyBanner({ zoneId, format, horizontalPosition = 'center', verticalPosition = 'bottom', sub, sub2, sub3, keywords, }) {
+    const [width, height] = format.split('x');
+    let script = `
+    var ad_idzone = "${zoneId}";
+    var ad_width = "${width}";
+    var ad_height = "${height}";
+    var v_pos = "${verticalPosition}";
+    var h_pos = "${horizontalPosition}";
+  `;
+    if (sub) {
+        script += `var ad_sub = ${sub};`;
+    }
+    if (sub2) {
+        script += `var ad_sub2 = ${sub2};`;
+    }
+    if (sub3) {
+        script += `var ad_sub3 = ${sub3};`;
+    }
+    if (keywords) {
+        script += `var ad_tags = ${keywords.join(',')};`;
+    }
+    const { loading: loadingInline } = useScript(script, { inline: true });
+    const { loading: loadingExternal } = useScript(`https://a.realsrv.com/js.php?t=17&idzone=${zoneId}`, {
+        batch: false,
+    });
+    useEffect(() => {
+        if (loadingInline || loadingExternal) {
+            return;
+        }
+        return () => {
+            var _a;
+            (_a = document.getElementById(`sticky-banner-${zoneId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    });
+    return null;
+});
+StickyBanner.propTypes = propTypes;
+
+export { Adblock, Banner, Outstream, StickyBanner };

dist/use-script.d.ts

@@ -1,3 +0,8 @@
-export declare function useScript(src: string): {
+declare type Options = {
+    inline: boolean;
+    batch: boolean;
+};
+export declare function useScript(src: string, options?: Partial<Options>): {
     loading: boolean;
 };
+export {};

package.json

 {
   "name": "exoclick-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.cjs.js",
@@ -10,2 +10,10 @@ "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "description": "Use exoclick ads in React.",
+  "keywords": [
+    "exoclick",
+    "react",
+    "banner",
+    "outstream",
+    "adblock"
+  ],
   "devDependencies": {
@@ -66,2 +74,2 @@ "@testing-library/jest-dom": "^5.12.0",
   }
-}
+}

README.md

 # exoclick-react sdk
-Use [ExoClick's banners](https://www.exoclick.com/signup/?login=tomhooijenga) in React.
+Use [ExoClick's Ad formats](https://www.exoclick.com/signup/?login=tomhooijenga) in React.
 
@@ -21,8 +21,13 @@ Installation
 ```
+Check out [all the docs](https://exoclick-react.netlify.app).
 
 # Features
 Currently, supported formats of ExoClick are:
-* Banner (Web)
-* Banner (Mobile)
-* Multi-Format
-* Outstream video
+* [Banner (Web)](https://exoclick-react.netlify.app/src-components-banner-banner#regular-web)
+* [Banner (Mobile)](https://exoclick-react.netlify.app/src-components-banner-banner#mobile)
+* [Banner (Multi-Format)](https://exoclick-react.netlify.app/src-components-banner-banner#multi-format)
+* [Sticky Banner (Multi-Format)](https://exoclick-react.netlify.app/src-components-banner-banner#multi-format)
+* [Outstream video](https://exoclick-react.netlify.app/src-components-outstream-outstream)
+
+Additionally, there is also the [\<Adblock /> component](https://exoclick-react.netlify.app/src-components-adblock-adblock) to detect 
+if the user has ad-blocking enabled.

No alert changes

Improved metrics

Total package byte prevSize

26773

increased by51.08%

Lines of code

645

increased by49.65%

Number of lines in readme file

32

increased by18.52%

Worsened metrics

Number of package files

15

decreased by-25%

No dependency changes