Enabling intersection observer options.

Author: TheodorTomas

src/__tests__/loadable-components/intersection-observer.test.js

@@ -15,6 +15,7 @@ const loadableVisiblity = require('../../loadable-components')
 const opts = {
   loading: () => null,
   loader: () => Promise.resolve(),
+  observerOptions: { 'a': 'test' }
 }
 
 const props = {'a': 1, 'b': 2}
@@ -104,4 +105,22 @@ describe('Loadable', () => {
 
     expect(globallyTrackedElements.length).toEqual(1)
   })
+
+
+  test('it should call setIntersectionObserver with observerOptions', () => {
+    const mock = jest.fn().mockImplementation(() => {
+      return {
+        observe: () => {},
+      }
+    })
+
+    global.IntersectionObserver = mock
+
+    const Loader = loadableVisiblity(opts)
+
+    mount(<Loader {...props} />)
+
+    expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions)
+    global.IntersectionObserver = IntersectionObserver
+  });
 })

src/__tests__/react-loadable/intersection-observer.test.js

@@ -11,6 +11,7 @@ const LoadableVisibility = require('../../')
 const opts = {
   loading: () => null,
   loader: () => Promise.resolve(),
+  observerOptions: { 'a': 'test' }
 }
 
 const props = {'a': 1, 'b': 2}
@@ -77,6 +78,23 @@ describe('Loadable', () => {
     expect(wrapper.find('.loading-class-name')).toHaveLength(0)
     expect(wrapper.find('LoadableObject')).toHaveLength(1)
   });
+
+  test('it should call setIntersectionObserver with observerOptions', () => {
+    const mock = jest.fn().mockImplementation(() => {
+      return {
+        observe: () => {},
+      }
+    })
+
+    global.IntersectionObserver = mock
+
+    const Loader = LoadableVisibility(opts)
+
+    mount(<Loader {...props} />)
+
+    expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions)
+    global.IntersectionObserver = IntersectionObserver
+  });
 })
 
 describe('Loadable.Map', () => {

src/createLoadableVisibilityComponent.js

@@ -4,16 +4,18 @@ import { IntersectionObserver } from './capacities'
 let intersectionObserver
 const trackedElements = new Map()
 
-if (IntersectionObserver) {
-  intersectionObserver = new window.IntersectionObserver((entries, observer) => {
-    entries.forEach((entry) => {
-      const trackedElement = trackedElements.get(entry.target)
-
-      if (trackedElement && entry.intersectionRatio > 0) {
-        trackedElement.visibilityHandler()
-      }
-    })
-  })
+const setIntersectionObserver = (options = {}) => {
+  if (IntersectionObserver) {
+    intersectionObserver = new window.IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        const trackedElement = trackedElements.get(entry.target)
+
+        if (trackedElement && entry.intersectionRatio > 0) {
+          trackedElement.visibilityHandler()
+        }
+      })
+    }, options)
+  }
 }
 
 function createLoadableVisibilityComponent (args, {
@@ -52,6 +54,7 @@ function createLoadableVisibilityComponent (args, {
       if (!preloaded) {
         const element = this.loadingRef
         trackedElements.set(element, this)
+        setIntersectionObserver(args[0].observerOptions)
         intersectionObserver.observe(element)
       }
     }