react-page-visibility - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

dist/index.es5.js

 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -9,3 +11,3 @@
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -62,9 +64,21 @@
 
-var PageVisibility = function (_Component) {
-    _inherits(PageVisibility, _Component);
+var getHandlerArgs = function getHandlerArgs() {
+    var hidden = visibility.hidden,
+        state = visibility.state;
 
-    function PageVisibility() {
+    return [!document[hidden], document[state]];
+};
+
+var PageVisibility = function (_React$Component) {
+    _inherits(PageVisibility, _React$Component);
+
+    function PageVisibility(props) {
         _classCallCheck(this, PageVisibility);
 
-        return _possibleConstructorReturn(this, (PageVisibility.__proto__ || Object.getPrototypeOf(PageVisibility)).apply(this, arguments));
+        var _this = _possibleConstructorReturn(this, (PageVisibility.__proto__ || Object.getPrototypeOf(PageVisibility)).call(this, props));
+
+        _this.state = {
+            isSupported: isSupported && visibility
+        };
+        return _this;
     }
@@ -75,3 +89,3 @@
         value: function componentWillMount() {
-            if (!isSupported || !visibility) {
+            if (!this.state.isSupported) {
                 return;
@@ -81,4 +95,2 @@ }
             this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-            this.isListening = true;
-
             document.addEventListener(visibility.event, this.handleVisibilityChange);
@@ -89,3 +101,3 @@ }
         value: function componentWillUnmount() {
-            if (!this.isListening) {
+            if (!this.state.isSupported) {
                 return;
@@ -98,6 +110,12 @@ }
         value: function handleVisibilityChange() {
-            var hidden = visibility.hidden,
-                state = visibility.state;
+            if (typeof this.props.onChange === 'function') {
+                var _props;
 
-            this.props.onChange(document[state], document[hidden]);
+                // propagate change to callback
+                (_props = this.props).onChange.apply(_props, _toConsumableArray(getHandlerArgs()));
+            }
+            if (typeof this.props.children === 'function') {
+                // we pass the props directly to the function as children
+                this.forceUpdate();
+            }
         }
@@ -110,3 +128,13 @@ }, {
             }
+            // function as children pattern support
+            if (typeof this.props.children === 'function') {
+                var _props2;
 
+                if (!this.state.isSupported) {
+                    // don't pass any arguments if PageVisibility is not supported
+                    return this.props.children();
+                }
+                return (_props2 = this.props).children.apply(_props2, _toConsumableArray(getHandlerArgs()));
+            }
+
             return React.Children.only(this.props.children);
@@ -117,3 +145,3 @@ }
     return PageVisibility;
-}(Component);
+}(React.Component);
 
@@ -123,5 +151,6 @@ PageVisibility.displayName = 'PageVisibility';
 PageVisibility.propTypes = {
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 
 export default PageVisibility;

dist/index.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -50,5 +50,18 @@
 
-class PageVisibility extends Component {
+const getHandlerArgs = () => {
+    const { hidden, state } = visibility;
+    return [!document[hidden], document[state]];
+};
+
+class PageVisibility extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isSupported: isSupported && visibility
+        };
+    }
+
     componentWillMount() {
-        if (!isSupported || !visibility) {
+        if (!this.state.isSupported) {
             return;
@@ -58,4 +71,2 @@ }
         this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-        this.isListening = true;
-
         document.addEventListener(visibility.event, this.handleVisibilityChange);
@@ -65,3 +76,3 @@ }
     componentWillUnmount() {
-        if (!this.isListening) {
+        if (!this.state.isSupported) {
             return;
@@ -73,4 +84,10 @@ }
     handleVisibilityChange() {
-        const { hidden, state } = visibility;
-        this.props.onChange(document[state], document[hidden]);
+        if (typeof this.props.onChange === 'function') {
+            // propagate change to callback
+            this.props.onChange(...getHandlerArgs());
+        }
+        if (typeof this.props.children === 'function') {
+            // we pass the props directly to the function as children
+            this.forceUpdate();
+        }
     }
@@ -82,2 +99,10 @@
         }
+        // function as children pattern support
+        if (typeof this.props.children === 'function') {
+            if (!this.state.isSupported) {
+                // don't pass any arguments if PageVisibility is not supported
+                return this.props.children();
+            }
+            return this.props.children(...getHandlerArgs());
+        }
 
@@ -91,5 +116,6 @@ return React.Children.only(this.props.children);
 PageVisibility.propTypes = {
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 
 export default PageVisibility;

dist/index.umd.js

@@ -31,2 +31,14 @@ (function (global, factory) {
 
+    function _toConsumableArray(arr) {
+        if (Array.isArray(arr)) {
+            for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+                arr2[i] = arr[i];
+            }
+
+            return arr2;
+        } else {
+            return Array.from(arr);
+        }
+    }
+
     function _classCallCheck(instance, Constructor) {
@@ -129,9 +141,21 @@ if (!(instance instanceof Constructor)) {
 
-    var PageVisibility = function (_Component) {
-        _inherits(PageVisibility, _Component);
+    var getHandlerArgs = function getHandlerArgs() {
+        var hidden = visibility.hidden,
+            state = visibility.state;
 
-        function PageVisibility() {
+        return [!document[hidden], document[state]];
+    };
+
+    var PageVisibility = function (_React$Component) {
+        _inherits(PageVisibility, _React$Component);
+
+        function PageVisibility(props) {
             _classCallCheck(this, PageVisibility);
 
-            return _possibleConstructorReturn(this, (PageVisibility.__proto__ || Object.getPrototypeOf(PageVisibility)).apply(this, arguments));
+            var _this = _possibleConstructorReturn(this, (PageVisibility.__proto__ || Object.getPrototypeOf(PageVisibility)).call(this, props));
+
+            _this.state = {
+                isSupported: isSupported && visibility
+            };
+            return _this;
         }
@@ -142,3 +166,3 @@
             value: function componentWillMount() {
-                if (!isSupported || !visibility) {
+                if (!this.state.isSupported) {
                     return;
@@ -148,4 +172,2 @@ }
                 this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-                this.isListening = true;
-
                 document.addEventListener(visibility.event, this.handleVisibilityChange);
@@ -156,3 +178,3 @@ }
             value: function componentWillUnmount() {
-                if (!this.isListening) {
+                if (!this.state.isSupported) {
                     return;
@@ -165,6 +187,12 @@ }
             value: function handleVisibilityChange() {
-                var hidden = visibility.hidden,
-                    state = visibility.state;
+                if (typeof this.props.onChange === 'function') {
+                    var _props;
 
-                this.props.onChange(document[state], document[hidden]);
+                    // propagate change to callback
+                    (_props = this.props).onChange.apply(_props, _toConsumableArray(getHandlerArgs()));
+                }
+                if (typeof this.props.children === 'function') {
+                    // we pass the props directly to the function as children
+                    this.forceUpdate();
+                }
             }
@@ -177,3 +205,13 @@ }, {
                 }
+                // function as children pattern support
+                if (typeof this.props.children === 'function') {
+                    var _props2;
 
+                    if (!this.state.isSupported) {
+                        // don't pass any arguments if PageVisibility is not supported
+                        return this.props.children();
+                    }
+                    return (_props2 = this.props).children.apply(_props2, _toConsumableArray(getHandlerArgs()));
+                }
+
                 return _react2.default.Children.only(this.props.children);
@@ -184,3 +222,3 @@ }
         return PageVisibility;
-    }(_react.Component);
+    }(_react2.default.Component);
 
@@ -190,3 +228,4 @@ PageVisibility.displayName = 'PageVisibility';
     PageVisibility.propTypes = {
-        onChange: _propTypes2.default.func.isRequired
+        onChange: _propTypes2.default.func,
+        children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
     };
@@ -193,0 +232,0 @@

package.json

 {
   "name": "react-page-visibility",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Declarative, nested, stateful, isomorphic page visibility for React",
@@ -39,5 +39,7 @@ "author": "Gilad Peleg <[e-mail]> (http://giladpeleg.com)",
     "faucet": "^0.0.1",
+    "jsdom": "^11.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
+    "sinon": "^4.5.0",
     "tape": "^4.8.0"
@@ -44,0 +46,0 @@ },

README.md

@@ -40,32 +40,47 @@ # React Page Visibility
 
-A rotating carousal component that will be passed down a prop of whether to rotate the images
-or not based on whether page is visible.
+A rotating carousal component that will be passed down a prop of whether to rotate the images or not based on whether page is visible.
 
+### Using `onChange` callback
+
 ```js
+import React from 'react';
 import PageVisibility from 'react-page-visibility';
 
-export default React.createClass({
-    getInitialState() {
-        return {
-            visible: true
-        },
-    },
-    handleVisibilityChange(visibilityState, documentHidden) {
-        this.setState({ visible: !documentHidden });
-    },
+class AppContainer extends React.Component {
+    state = {
+        rotate: true
+    };
+
+    handleVisibilityChange = isVisible => {
+        this.setState({ rotate: !isVisible });
+    }
+
     render() {
-        const { visible } = this.state;
-
         return (
             <PageVisibility onChange={this.handleVisibilityChange}>
-                <RotatingCarousel rotate={visible} />
+                <RotatingCarousel rotate={this.state.rotate} />
             </PageVisibility>
         );
-    },
-});
+    }
+}
 ```
 
+## Using `children` as function callback
+
+```js
+import React from 'react';
+import PageVisibility from 'react-page-visibility';
+
+const AppContainer = () => {
+    return (
+        <PageVisibility>
+            { isVisible => <RotatingCarousel rotate={isVisible} /> }
+        </PageVisibility>
+    );
+}
+```
+
 ## API
 
-`react-page-visibility` is an higher order component which **requires** you to pass it an `onChange` function:
+`react-page-visibility` is an higher order component, you can pass to it an `onChange` function:
 
@@ -76,7 +91,14 @@ `onChange(handler)`
 
-`Function handler(<String> visibilityState, <Boolean> documentHidden)`
+`Function handler(<Boolean> isVisible, <String> visibilityState)`
 
+- `isVisible` is a Boolean indicating whether document is considered visible to the user or not.
 - `visibilityState` is a String and can be one of `visible`, `hidden`, `prerender`, `unloaded` (if your browser supports those)
-- `documentHidden` is a Boolean indicating whether document is considered hidden to the user.
 
+**Notice: previous versions had different arguments in the `handler`**
+
+Or you can use [function as children](https://reactpatterns.com/#function-as-children) pattern,
+where `children` is the callback to run when the `visibilityState` of the document changes.
+
+`Function children(<Boolean> isVisible, <String> visibilityState)`
+
 See [MDN Page Visibility API Properties overview](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#Properties_overview)
@@ -83,0 +105,0 @@

src/index.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -50,5 +50,18 @@
 
-class PageVisibility extends Component {
+const getHandlerArgs = () => {
+    const { hidden, state } = visibility;
+    return [!document[hidden], document[state]];
+};
+
+class PageVisibility extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isSupported: isSupported && visibility
+        };
+    }
+
     componentWillMount() {
-        if (!isSupported || !visibility) {
+        if (!this.state.isSupported) {
             return;
@@ -58,4 +71,2 @@ }
         this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-        this.isListening = true;
-
         document.addEventListener(visibility.event, this.handleVisibilityChange);
@@ -65,3 +76,3 @@ }
     componentWillUnmount() {
-        if (!this.isListening) {
+        if (!this.state.isSupported) {
             return;
@@ -73,4 +84,10 @@ }
     handleVisibilityChange() {
-        const { hidden, state } = visibility;
-        this.props.onChange(document[state], document[hidden]);
+        if (typeof this.props.onChange === 'function') {
+            // propagate change to callback
+            this.props.onChange(...getHandlerArgs());
+        }
+        if (typeof this.props.children === 'function') {
+            // we pass the props directly to the function as children
+            this.forceUpdate();
+        }
     }
@@ -82,2 +99,10 @@
         }
+        // function as children pattern support
+        if (typeof this.props.children === 'function') {
+            if (!this.state.isSupported) {
+                // don't pass any arguments if PageVisibility is not supported
+                return this.props.children();
+            }
+            return this.props.children(...getHandlerArgs());
+        }
 
@@ -91,5 +116,9 @@ return React.Children.only(this.props.children);
 PageVisibility.propTypes = {
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func,
+    children: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.func
+    ])
 };
 
 export default PageVisibility;

No alert changes

Improved metrics

Total package byte prevSize

25814

increased by24.83%

Lines of code

517

increased by27.03%

Number of lines in readme file

107

increased by25.88%

Worsened metrics

Dev dependency count

15

increased by15.38%

No dependency changes