Add percentage option for partial visibility

README.md

@@ -1,14 +1,12 @@
-React Visibility Sensor
-====
+# React Visibility Sensor
 
 [![Build Status](https://secure.travis-ci.org/joshwnj/react-visibility-sensor.png)](http://travis-ci.org/joshwnj/react-visibility-sensor)
 
 Sensor component for React that notifies you when it goes in or out of the window viewport.
 
 Sponsored by [X-Team](https://x-team.com)
 
-Install
-----
+## Install
 
 `npm install react-visibility-sensor`
 
@@ -23,8 +21,7 @@ In this case, make sure that `React` and `ReactDOM` are already loaded and globa
 
 Take a look at the [umd example](./example-umd/) to see this in action
 
-Example
-----
+## Example
 
 [View an example on codesandbox](https://codesandbox.io/s/p73kyx9zpm)
 
@@ -40,13 +37,13 @@ To run the example locally:
 General usage goes something like:
 
 ```js
-const VisibilitySensor = require('react-visibility-sensor');
+const VisibilitySensor = require("react-visibility-sensor");
 
-function onChange (isVisible) {
-  console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
+function onChange(isVisible) {
+  console.log("Element is now %s", isVisible ? "visible" : "hidden");
 }
 
-function MyComponent (props) {
+function MyComponent(props) {
   return (
     <VisibilitySensor onChange={onChange}>
       <div>...content goes here...</div>
@@ -58,24 +55,22 @@ function MyComponent (props) {
 You can also pass a child function, which can be convenient if you don't need to store the visibility anywhere:
 
 ```js
-function MyComponent (props) {
+function MyComponent(props) {
   return (
     <VisibilitySensor>
-      {({isVisible}) =>
-        <div>I am {isVisible ? 'visible' : 'invisible'}</div>
-      }
+      {({ isVisible }) => <div>I am {isVisible ? "visible" : "invisible"}</div>}
     </VisibilitySensor>
   );
 }
 ```
 
-Props
-----
+## Props
 
 - `onChange`: callback for whenever the element changes from being within the window viewport or not. Function is called with 1 argument `(isVisible: boolean)`
-- `active`: (default `true`) boolean flag for enabling / disabling the sensor.  When `active !== true` the sensor will not fire the `onChange` callback.
+- `active`: (default `true`) boolean flag for enabling / disabling the sensor. When `active !== true` the sensor will not fire the `onChange` callback.
 - `partialVisibility`: (default `false`) consider element visible if only part of it is visible. Also possible values are - 'top', 'right', 'bottom', 'left' - in case it's needed to detect when one of these become visible explicitly.
 - `offset`: (default `{}`) with offset you can define amount of px from one side when the visibility should already change. So in example setting `offset={{top:10}}` means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along with `partialVisibility`
+- `minTopPercent`: (default `0.0`) consider element visible if a minimum percentage is visible, so if at least 0.2 (20%) is in the viewport, we mark the element as visible.
 - `minTopValue`: (default `0`) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.
 - `intervalCheck`: (default `true`) when this is true, it gives you the possibility to check if the element is in view even if it wasn't because of a user scroll
 - `intervalDelay`: (default `100`) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.
@@ -87,16 +82,14 @@ Props
 - `resizeThrottle`: (default: `-1`) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on resize event. Throttle supercedes delay.
 - `containment`: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.
 - `delayedCall`: (default `false`) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
-- `children`: can be a React element or a function.  If you provide a function, it will be called with 1 argument `{isVisible: ?boolean, visibilityRect: Object}`
+- `children`: can be a React element or a function. If you provide a function, it will be called with 1 argument `{isVisible: ?boolean, visibilityRect: Object}`
 
 It's possible to use both `intervalCheck` and `scrollCheck` together. This means you can detect most visibility changes quickly with `scrollCheck`, and an `intervalCheck` with a higher `intervalDelay` will act as a fallback for other visibility events, such as resize of a container.
 
-Thanks
-----
+## Thanks
 
 Special thanks to [contributors](https://github.com/joshwnj/react-visibility-sensor/graphs/contributors)
 
-License
-----
+## License
 
 MIT

package.json

@@ -59,7 +59,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,json,css,md}": [
+    "*.{js,json,jsx,css,md}": [
       "prettier --write",
       "git add"
     ]

tests/visibility-sensor-spec.jsx

@@ -16,9 +16,7 @@ describe("VisibilitySensor", function() {
     document.body.removeChild(node);
   });
 
-  it("should notify of changes to visibility when parent moves", function(
-    done
-  ) {
+  it("should notify of changes to visibility when parent moves", function(done) {
     var firstTime = true;
     var onChange = function(isVisible) {
       // by default we expect the sensor to be visible
@@ -49,9 +47,7 @@ describe("VisibilitySensor", function() {
     ReactDOM.render(element, node);
   });
 
-  it("should notify of changes to visibility when user scrolls", function(
-    done
-  ) {
+  it("should notify of changes to visibility when user scrolls", function(done) {
     var firstTime = true;
     var onChange = function(isVisible) {
       // by default we expect the sensor to be visible
@@ -198,9 +194,7 @@ describe("VisibilitySensor", function() {
     assert(!component2.debounceCheck, "debounceCheck should not be set");
   });
 
-  it("should work when using offset prop and moving to outside of offset area", function(
-    done
-  ) {
+  it("should work when using offset prop and moving to outside of offset area", function(done) {
     var firstTime = true;
     node.setAttribute("style", "position:absolute; top:51px");
     var onChange = function(isVisible) {
@@ -262,9 +256,7 @@ describe("VisibilitySensor", function() {
     ReactDOM.render(element, node);
   });
 
-  it("should work when using offset prop and moving to inside of offset area", function(
-    done
-  ) {
+  it("should work when using offset prop and moving to inside of offset area", function(done) {
     var firstTime = true;
     node.setAttribute("style", "position:absolute; top:49px");
     var onChange = function(isVisible) {
@@ -295,9 +287,7 @@ describe("VisibilitySensor", function() {
     ReactDOM.render(element, node);
   });
 
-  it("should work when using negative offset prop and moving to outside of viewport", function(
-    done
-  ) {
+  it("should work when using negative offset prop and moving to outside of viewport", function(done) {
     var firstTime = true;
     node.setAttribute("style", "position:absolute; top:-49px");
     var onChange = function(isVisible) {
@@ -390,4 +380,116 @@ describe("VisibilitySensor", function() {
 
     ReactDOM.render(element, node);
   });
+
+  it("should return visible if a minimum top is visible", function(done) {
+    var firstTime = true;
+    var onChange = function(isVisible) {
+      if (firstTime) {
+        assert.equal(isVisible, true, "Component is visible");
+        done();
+      }
+    };
+
+    const style = {
+      position: "absolute",
+      top: "100%",
+      marginTop: "-8px",
+      width: "10px",
+      height: "10px"
+    };
+
+    var element = (
+      <VisibilitySensor minTopValue={8} onChange={onChange} partialVisibility>
+        <div style={style} />
+      </VisibilitySensor>
+    );
+
+    ReactDOM.render(element, node);
+  });
+
+  it("should not return visible if a minimum top is not visible", function(done) {
+    var firstTime = true;
+    var onChange = function(isVisible) {
+      if (firstTime) {
+        assert.equal(isVisible, false, "Component is not visible");
+        done();
+      }
+    };
+
+    const style = {
+      position: "absolute",
+      top: "100%",
+      marginTop: "-7px",
+      width: "10px",
+      height: "10px"
+    };
+
+    var element = (
+      <VisibilitySensor minTopValue={8} onChange={onChange} partialVisibility>
+        <div style={style} />
+      </VisibilitySensor>
+    );
+
+    ReactDOM.render(element, node);
+  });
+
+  it("should return visible if a minimum percentage is visible", function(done) {
+    var firstTime = true;
+    var onChange = function(isVisible) {
+      if (firstTime) {
+        assert.equal(isVisible, true, "Component is visible");
+        done();
+      }
+    };
+
+    const style = {
+      position: "absolute",
+      top: "100%",
+      marginTop: "-8px",
+      width: "10px",
+      height: "10px"
+    };
+
+    var element = (
+      <VisibilitySensor
+        minTopPercent={0.8}
+        onChange={onChange}
+        partialVisibility
+      >
+        <div style={style} />
+      </VisibilitySensor>
+    );
+
+    ReactDOM.render(element, node);
+  });
+
+  it("should not return visible if a minimum percentage is not visible", function(done) {
+    var firstTime = true;
+    var onChange = function(isVisible) {
+      if (firstTime) {
+        assert.equal(isVisible, false, "Component is not visible");
+        done();
+      }
+    };
+
+    const style = {
+      position: "absolute",
+      top: "100%",
+      marginTop: "-7px",
+      width: "10px",
+      height: "10px"
+    };
+
+    var element = (
+      <VisibilitySensor
+        minTopPercent={0.8}
+        onChange={onChange}
+        partialVisibility
+      >
+        <div style={style} />
+      </VisibilitySensor>
+    );
+
+    ReactDOM.render(element, node);
+  });
 });

visibility-sensor.js

@@ -21,6 +21,7 @@ export default class VisibilitySensor extends React.Component {
   static defaultProps = {
     active: true,
     partialVisibility: false,
+    minTopPercent: 0,
     minTopValue: 0,
     scrollCheck: false,
     scrollDelay: 250,
@@ -70,6 +71,7 @@ export default class VisibilitySensor extends React.Component {
         ? PropTypes.instanceOf(window.Element)
         : PropTypes.any,
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    minTopPercent: PropTypes.number,
     minTopValue: PropTypes.number
   };
 
@@ -290,10 +292,15 @@ export default class VisibilitySensor extends React.Component {
 
       // if we have minimum top visibility set by props, lets check, if it meets the passed value
       // so if for instance element is at least 200px in viewport, then show it.
-      isVisible = this.props.minTopValue
-        ? partialVisible &&
-          rect.top <= containmentRect.bottom - this.props.minTopValue
-        : partialVisible;
+      if (this.props.minTopValue) {
+        isVisible = rect.top <= containmentRect.bottom - this.props.minTopValue;
+      } else if (this.props.minTopPercent) {
+        const height = rect.bottom - rect.top;
+        const minTopValue = height * this.props.minTopPercent;
+        isVisible = rect.top <= containmentRect.bottom - minTopValue;
+      } else {
+        isVisible = partialVisible;
+      }
     }
 
     // Deprecated options for calculating offset.