https://github.com/mintuz/horizon
An Intersection Observer wrapper with some smart defaults
https://github.com/mintuz/horizon
Last synced: 6 months ago
JSON representation
An Intersection Observer wrapper with some smart defaults
- Host: GitHub
- URL: https://github.com/mintuz/horizon
- Owner: mintuz
- Created: 2018-03-26T17:56:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T05:27:31.000Z (over 3 years ago)
- Last Synced: 2025-10-10T20:38:15.372Z (9 months ago)
- Language: JavaScript
- Size: 362 KB
- Stars: 8
- Watchers: 0
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Horizon
A light wrapper round the Intersection Observer API. Please note this is not a polyfill for Intersection Observer.
## Install
`yarn add @mintuz/horizon --save`
## Usage
### Config
| Key | Value | Description | Default |
| -------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
| onEntry | `(entry) => {}` | Callback which is called when the element to observe is in view, triggers once if triggerOnce is set to true | N/A |
| onExit | `(entry) => {}` | Callback which is called when the element is out of view | N/A |
| triggerOnce | `true` | Will trigger onEntry callback once, useful for lazyLoading | false |
| toObserve | `document.querySelector('.element-to-come-in-view')` | The element to observe which may or may not come into view | Required |
| intersectionObserverConfig | `{ root: null, rootMargin: '35%', threshold: 0 }` | Options passed to [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | `{ root: null rootMargin: '35%', threshold: 0 }` |
### Example
```
import Horizon from '@mintuz/horizon';
const observed = Horizon({
onEntry(entry) {
console.log('element in view', entry);
},
onExit(entry) {
console.log('element out of view', entry);
},
triggerOnce: true,
toObserve: document.querySelector('.element-to-come-in-view'),
intersectionObserverConfig: {
root: document.querySelector('body'),
rootMargin: '0px',
threshold: 1.0
}
});
observed.unobserve();
```