Add threshold Intersection observer options as prop

Author: tiaanduplessis

README.md

@@ -72,6 +72,7 @@ Toggle prop saves GPU and battery by stopping the video when no longer in view!
 | `repeatOnInView` | boolean | Repeats callbacks for onInView/onNotInView, rather than firing just the first time. `default: false` |
 | `intoViewMargin` | string - css margin | Margin added to viewport for area to consider “in view”, can be negative. Use f.e. with positive value for lazy loading content just before in view, or with negative to start fading in element just after in view. Must be `px` or `%`. Default: ‘-20%’.  |
 | `useInviewMonitor` | func | Convenient function that can be used to dynamically disable the monitor, for example for mobile devices. |
+| `threshold` | number | Number which indicate at what percentage of the target's visibility the observer's callback should be executed. |
 
 ## Contributing
 

src/index.js

@@ -19,7 +19,7 @@ class InviewMonitor extends Component {
 Perhaps use a polyfill like: https://cdn.polyfill.io/v2/polyfill.js?features=IntersectionObserver ?`)
       return
     }
-    const { useInviewMonitor, intoViewMargin } = this.props
+    const { useInviewMonitor, intoViewMargin, threshold } = this.props
     if (
       !this._element ||
       !useInviewMonitor ||
@@ -28,7 +28,8 @@ Perhaps use a polyfill like: https://cdn.polyfill.io/v2/polyfill.js?features=Int
       return
     }
     const options = {
-      rootMargin: intoViewMargin
+      rootMargin: intoViewMargin,
+      threshold
     }
     // any performance benefits from trying to re-use the observer?
     // possible enhancement to add later on.
@@ -195,13 +196,15 @@ InviewMonitor.propTypes = {
   // because easier to toggle this prop, then toggle not using the component at all.
   useInviewMonitor: PropTypes.func,
 
-  intoViewMargin: PropTypes.string
+  intoViewMargin: PropTypes.string,
+  threshold: PropTypes.number
 }
 InviewMonitor.defaultProps = {
   classNameNotInView: '',
   childPropsNotInView: {},
   useInviewMonitor: () => true,
-  intoViewMargin: '-20%'
+  intoViewMargin: '-20%',
+  threshold: 0
 }
 
 export default InviewMonitor