Trigger onChange multiple times with threshold array

Author: Daniel Schmidt

src/index.js

@@ -50,7 +50,7 @@ class Observer extends Component {
   }
 
   componentWillUpdate(nextProps, nextState) {
-    if (!!this.props.onChange && nextState.inView !== this.state.inView) {
+    if (!!this.props.onChange && nextState !== this.state) {
       this.props.onChange(nextState.inView)
     }
   }
@@ -114,6 +114,7 @@ class Observer extends Component {
       triggerOnce,
       threshold,
       root,
+      rootId,
       rootMargin,
       ...props
     } = this.props

src/intersection.js

@@ -97,11 +97,20 @@ function onChange(changes) {
       const { callback, visible, options, observerId } = INSTANCE_MAP.get(
         target,
       )
-
-      // Trigger on 0 ratio only when not visible. This is fallback for browsers without isIntersecting support
-      let inView = visible
-        ? intersectionRatio > options.threshold
-        : intersectionRatio >= options.threshold
+      let inView
+
+      if (Array.isArray(options.threshold)) {
+        inView = options.threshold.some(threshold => {
+          return visible
+            ? intersectionRatio > threshold
+            : intersectionRatio >= threshold
+        })
+      } else {
+        // Trigger on 0 ratio only when not visible. This is fallback for browsers without isIntersecting support
+        inView = visible
+          ? intersectionRatio > options.threshold
+          : intersectionRatio >= options.threshold
+      }
 
       if (isIntersecting !== undefined) {
         // If isIntersecting is defined, ensure that the element is actually intersecting.

stories/Observer.story.js

@@ -44,7 +44,19 @@ storiesOf('Intersection Observer', module)
     <ScrollWrapper>
       <Observer threshold={0.5} onChange={action('Child Observer inview')}>
         {inView =>
-          <Header>{`Header is fully inside the viewport: ${inView}`}</Header>}
+          <Header>{`Header is 50% inside the viewport: ${inView}`}</Header>}
+      </Observer>
+    </ScrollWrapper>,
+  )
+  .add('With threshold array', () =>
+    <ScrollWrapper>
+      <Observer
+        threshold={[0, 0.25, 0.5, 0.75, 1]}
+        onChange={action('Hit threshold trigger')}
+      >
+        {inView =>
+          <Header
+          >{`Header is inside threshold: ${inView} - onChange triggers multiple times.`}</Header>}
       </Observer>
     </ScrollWrapper>,
   )