Add rootID and refactor intersection.js

Author: Daniel Schmidt

README.md

@@ -42,7 +42,7 @@ You can import the [polyfill](https://yarnpkg.com/en/package/intersection-observ
 yarn add intersection-observer
 ```
 
-Then import it in your app
+Then import it in your app:
 
 ```js
 import 'intersection-observer'
@@ -53,10 +53,10 @@ The **`<Observer />`** accepts the following props:
 
 | Name             | Type      | Default           | Required | Description                                           |
 | ---------------- | --------- | ----------------- | -------- | ----------------------------------------------------- |
+| children         | func/node |                   | true     | Children should be either a function or a node        |
 | tag              | String    |                   | false    | Element tag to use for the wrapping component         |
-| children         | func/node |                   | false    | Children should be either a function or a node        |
-| triggerOnce      | Bool      | false             | true     | Only trigger this method once                         |
 | threshold        | Number    | 0                 | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering  |
+| triggerOnce      | Bool      | false             | false     | Only trigger this method once                         |
 | onChange         | Func      |                   | false    | Call this function whenever the in view state changes |
 | render           | Func      |                   | false    | Use render method to only render content when inView  |
 

src/index.js

@@ -22,14 +22,17 @@ class Observer extends Component {
     /** Only trigger the inView callback once */
     triggerOnce: PropTypes.bool,
     /** Number between 0 and 1 indicating the the percentage that should be visible before triggering */
-    threshold: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
-    /** The element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.*/
-    root: PropTypes.shape({
-      id: PropTypes.string,
-      getAttribute: PropTypes.func,
-    }),
+    threshold: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.number),
+      PropTypes.number,
+    ]),
+    /** The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.*/
+    root: PropTypes.object,
     /** Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). */
     rootMargin: PropTypes.string,
+    /** Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused.
+     * If you defined a root element, without adding an id, it will create a new instance for all components. */
+    rootId: PropTypes.string,
     /** Call this function whenever the in view state changes */
     onChange: PropTypes.func,
     /** Use render method to only render content when inView */
@@ -82,12 +85,16 @@ class Observer extends Component {
 
   observeNode() {
     if (!this.node) return
+    const { threshold, root, rootMargin, rootId } = this.props
     observe(
       this.node,
       this.handleChange,
-      this.props.threshold,
-      this.props.root,
-      this.props.rootMargin,
+      {
+        threshold,
+        root,
+        rootMargin,
+      },
+      rootId,
     )
   }
 

src/intersection.js

@@ -5,39 +5,38 @@ const OBSERVER_MAP = new Map()
  * Monitor element, and trigger callback when element becomes visible
  * @param element {HTMLElement}
  * @param callback {Function} Called with inView
- * @param threshold {Number} Number between 0 and 1, indicating how much of the element should be visible before triggering
- * @param root {HTMLElement} It should have a unique id or data-intersection-id in order for the Observer to reused.
- * @param rootMargin {String} The CSS margin to apply to the root element.
+ * @param options {Object} InterSection observer options
+ * @param options.threshold {Number} Number between 0 and 1, indicating how much of the element should be visible before triggering
+ * @param options.root {HTMLElement} It should have a unique id or data-intersection-id in order for the Observer to reused.
+ * @param options.rootMargin {String} The CSS margin to apply to the root element.
+ * @param rootId {String} Unique identifier for the root element, to enable reusing the IntersectionObserver
  */
 export function observe(
   element,
   callback,
-  threshold = 0,
-  root = null,
-  rootMargin = '0px',
+  options = {
+    threshold: 0,
+  },
+  rootId = null,
 ) {
+  const { threshold, root, rootMargin } = options
   if (!element || !callback) return
-  let observerId = `${threshold}_${rootMargin}`
+  let observerId = rootMargin ? `${threshold}_${rootMargin}` : `${threshold}`
 
   if (root) {
-    const rootId = root.id || root.getAttribute('data-intersection-id')
     observerId = rootId ? `${rootId}_${observerId}` : null
   }
 
   let observerInstance = observerId ? OBSERVER_MAP.get(observerId) : null
   if (!observerInstance) {
-    observerInstance = new IntersectionObserver(onChange, {
-      threshold,
-      root,
-      rootMargin,
-    })
+    observerInstance = new IntersectionObserver(onChange, options)
     if (observerId) OBSERVER_MAP.set(observerId, observerInstance)
   }
 
   INSTANCE_MAP.set(element, {
     callback,
     visible: false,
-    threshold,
+    options,
     observerId,
   })
 
@@ -62,8 +61,8 @@ export function unobserve(element) {
 
     // Check if we are stilling observing any elements with the same threshold.
     let itemsLeft = false
-    INSTANCE_MAP.forEach(item => {
-      if (item.observerId === observerId) {
+    INSTANCE_MAP.forEach((item, key) => {
+      if (item.observerId === observerId && key !== element) {
         itemsLeft = true
       }
     })
@@ -95,14 +94,14 @@ function onChange(changes) {
   changes.forEach(intersection => {
     if (INSTANCE_MAP.has(intersection.target)) {
       const { isIntersecting, intersectionRatio, target } = intersection
-      const { callback, visible, threshold, observerId } = INSTANCE_MAP.get(
+      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 > threshold
-        : intersectionRatio >= threshold
+        ? intersectionRatio > options.threshold
+        : intersectionRatio >= options.threshold
 
       if (isIntersecting !== undefined) {
         // If isIntersecting is defined, ensure that the element is actually intersecting.
@@ -113,7 +112,7 @@ function onChange(changes) {
       INSTANCE_MAP.set(target, {
         callback,
         visible: inView,
-        threshold,
+        options,
         observerId,
       })