Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeremenichelli/hunt
👻 Minimal library to observe nodes entering and leaving the viewport
https://github.com/jeremenichelli/hunt
Last synced: 4 days ago
JSON representation
👻 Minimal library to observe nodes entering and leaving the viewport
- Host: GitHub
- URL: https://github.com/jeremenichelli/hunt
- Owner: jeremenichelli
- License: mit
- Created: 2016-02-12T03:43:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T21:41:30.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T22:28:56.736Z (7 months ago)
- Language: JavaScript
- Homepage: https://jeremenichelli.github.io/hunt
- Size: 1.79 MB
- Stars: 340
- Watchers: 10
- Forks: 10
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hunt
[](https://travis-ci.org/jeremenichelli/hunt)
👻 Minimal library to observe nodes entering and leaving the viewport.
_Be sure to also check the **Intersection Observer API**, a native solution which works in modern browsers, if you want to know more I wrote an [introduction article](//jeremenichelli.io/2016/04/quick-introduction-to-the-intersection-observer-api) explaining how it works._
## Install
```sh
# npm
npm i huntjs --save
# yarn
yarn add huntjs
```
Or include it as a script with `//unpkg.com/huntjs/dist/hunt.umd.js` as source.
## Usage
The package exposes an observer that receives a `Node`, `NodeList` or `Array` as a first argument and an object as a second argument with the desired set of options.
```js
import Hunt from 'huntjs';
// lazy loading images using dataset and hunt
const lazyImages = document.querySelectorAll('img.lazy');
let observer = new Hunt(lazyImages, {
enter: (image) => image.src = image.dataset.src
});
```
_Check this example working [here](//jeremenichelli.github.io/hunt)_
By default the observer will stop _hunting_ elements when they enter and then leave the viewport.
## Config options
These are the properties you can set as a configuration:
- `enter`, _function_ called when the element becomes visible.
- `leave`, _function_ method called when the element leaves completely the viewport.
_Both callbacks will receive the element which triggered the action as argument._
- `persist`, _boolean_ and `false` by default which indicates if the targets should still be observed after they entered and left the viewport. When this option is `true` enter and leave methods will be called each time an element state changes. Recommended for constant animations triggered by scroll events.
- `offset`, _number_ that defines a number of pixels ahead of the element's state change, `0` being the default value. Good if you want to start loading an image before the user reaches to it.
- `throttleInterval`, _number_ interval use for event throttling. A lower number will mean elements are detected in view quicker, but may degrade performace. A higher value will mean elements are detected in view slower, but may improve performance. The default value is `100`, is recommended not to modify this.
### Custom configuration over dataset
If you need exceptions over config for one or more elements, `data-hunt-offset` and `data-hunt-persist` attributes can be used. These custom values will override the ones you passed to the observer.
```html
```
_**JSON.parse** is used on these values at runtime, make sure to pass safe content._
## Contributing
To contribute [Node.js](//nodejs.org) and [yarn](//yarnpkg.com) are required.
Before commit make sure to follow [conventional commits](//www.conventionalcommits.org) specification and check all tests pass by running `yarn test`.