fix: check intersectionRatio in addition to isIntersecting (#384)

Author: thebuilder

package.json

@@ -139,7 +139,8 @@
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
-    "@emotion/react": "11.0.0-next.15",
+    "@emotion/cache": "^11.0.0-next.16",
+    "@emotion/react": "^11.0.0-next.16",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-viewport": "^6.0.21",
     "@storybook/react": "^6.0.21",

src/InView.tsx

@@ -96,8 +96,7 @@ export class InView extends React.Component<
     this.observeNode();
   };
 
-  handleChange = (entry: IntersectionObserverEntry) => {
-    const inView = entry.isIntersecting || false;
+  handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {
     // Only trigger a state update if inView has changed.
     // This prevents an unnecessary extra state update during mount, when the element stats outside the viewport
     if (inView !== this.state.inView || inView) {

src/index.tsx

@@ -7,6 +7,7 @@ export default InView;
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export type ObserverInstanceCallback = (
+  inView: boolean,
   entry: IntersectionObserverEntry,
 ) => void;
 

src/observers.ts

@@ -55,14 +55,25 @@ function createObserver(options: IntersectionObserverInit) {
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
-        // @ts-ignore
+        // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
+        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
+        const inView = observer.thresholds.some((threshold) => {
+          return !entry.isIntersecting
+            ? // The intersectionRatio should be more than the threshold to be considered inside the viewport
+              entry.intersectionRatio > threshold
+            : // If we're not intersecting, make sure we accept `intersectionRatio` 0 as not inside the viewport
+              entry.intersectionRatio >= threshold;
+        });
+
+        // @ts-ignore support IntersectionObserver v2
         if (options.trackVisibility && typeof entry.isVisible === 'undefined') {
           // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
           // @ts-ignore
-          entry.isVisible = true;
+          entry.isVisible = inView;
         }
+
         elements.get(entry.target)?.forEach((callback) => {
-          callback(entry);
+          callback(inView && entry.isIntersecting, entry);
         });
       });
     }, options);

src/useInView.tsx

@@ -3,14 +3,21 @@ import * as React from 'react';
 import { InViewHookResponse, IntersectionOptions } from './index';
 import { useEffect } from 'react';
 import { observe } from './observers';
+type State = {
+  inView: boolean;
+  entry?: IntersectionObserverEntry;
+};
+
+const initialState: State = {
+  inView: false,
+  entry: undefined,
+};
 
 export function useInView(
   options: IntersectionOptions = {},
 ): InViewHookResponse {
   const unobserve = React.useRef<Function>();
-  const [intersectionEntry, setIntersectionEntry] = React.useState<
-    IntersectionObserverEntry | undefined
-  >(undefined);
+  const [state, setState] = React.useState<State>(initialState);
 
   const setRef = React.useCallback(
     (node) => {
@@ -26,8 +33,8 @@ export function useInView(
       if (node) {
         unobserve.current = observe(
           node,
-          (entry) => {
-            setIntersectionEntry(entry);
+          (inView, entry) => {
+            setState({ inView, entry });
 
             if (
               entry.isIntersecting &&
@@ -58,15 +65,11 @@ export function useInView(
     if (!unobserve.current && !options.triggerOnce && !options.skip) {
       // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
       // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
-      setIntersectionEntry(undefined);
+      setState(initialState);
     }
   });
 
-  const result = [
-    setRef,
-    intersectionEntry ? intersectionEntry.isIntersecting : false,
-    intersectionEntry,
-  ] as InViewHookResponse;
+  const result = [setRef, state.inView, state.entry] as InViewHookResponse;
 
   // Support object destructuring, by adding the specific values.
   result.ref = result[0];