diff --git a/src/__tests__/loadable-components/intersection-observer.test.js b/src/__tests__/loadable-components/intersection-observer.test.js
index 7a1e687..0e1cb90 100644
--- a/src/__tests__/loadable-components/intersection-observer.test.js
+++ b/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()
+
+ expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions)
+ global.IntersectionObserver = IntersectionObserver
+ });
})
diff --git a/src/__tests__/react-loadable/intersection-observer.test.js b/src/__tests__/react-loadable/intersection-observer.test.js
index 0117c4d..87baa1d 100644
--- a/src/__tests__/react-loadable/intersection-observer.test.js
+++ b/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()
+
+ expect(mock).toHaveBeenCalledWith(expect.anything(), opts.observerOptions)
+ global.IntersectionObserver = IntersectionObserver
+ });
})
describe('Loadable.Map', () => {
diff --git a/src/createLoadableVisibilityComponent.js b/src/createLoadableVisibilityComponent.js
index 72fbf68..5b0e1cc 100644
--- a/src/createLoadableVisibilityComponent.js
+++ b/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)
}
}