Skip to content

Commit e7c3880

Browse files
RendezLuis Merino
authored andcommitted
feat(utils): provide takeRecords() via main module
1 parent 0c31b19 commit e7c3880

File tree

2 files changed

+28
-2
lines changed

2 files changed

+28
-2
lines changed

README.md

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,10 @@ Some of the things you may want to use ReactIntersectionObserver for:
120120
* Occlusion culling - Don't render an object until is close to the viewport edges
121121
* Sentinel Scrolling - Infinite scroller with a recycled Sentinel
122122

123+
## Demo
124+
125+
Find multiple examples and usage guidelines in: [https://researchgate.github.io/react-intersection-observer/](https://researchgate.github.io/react-intersection-observer/).
126+
123127
## Options
124128

125129
### root
@@ -169,9 +173,28 @@ Type: `element|component`
169173

170174
Single React component or element that is used as the target to observe.
171175

172-
## Demo
176+
## Methods
173177

174-
Find multiple examples and usage guidelines in: [https://researchgate.github.io/react-intersection-observer/](https://researchgate.github.io/react-intersection-observer/).
178+
### takeRecords(options?: IntersectionObserverOptions)
179+
180+
Calls all the observer instance's `takeRecords()` methods if no options are passed, and if options are passed triggers only those matching all of the options.
181+
182+
> The `IntersectionObserver` method `takeRecords()` returns an array of `IntersectionObserverEntry` objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback.
183+
>
184+
> [MDN: IntersectionObserver.takeRecords()](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/takeRecords)
185+
186+
#### [What are the use cases of `takeRecords`?](https://github.com/WICG/IntersectionObserver/issues/133#issuecomment-224368861)
187+
In cases where you need to synchronously get any `IntersectionObserverEntry` objects that have been generated but not yet delivered.
188+
189+
#### Usage
190+
```js
191+
import { takeRecords } from '@researchgate/react-intersection-observer';
192+
193+
takeRecords({
194+
root: document.getElementById('#scrolling-container'),
195+
rootMargin: '0% 0% -25% 0%',
196+
});
197+
```
175198

176199
## Polyfill
177200

src/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1+
import IntersectionObserverContainer from './IntersectionObserverContainer';
2+
13
export { default } from './IntersectionObserver';
24
export { parseRootMargin } from './utils';
5+
export const takeRecords = IntersectionObserverContainer.takeRecords;

0 commit comments

Comments
 (0)