vue3-observe-visibility
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
Sponsors
## Table of contents
- [Installation](#installation)
- [Import](#import)
- [Browser](#browser)
- [Usage](#usage)
- [IntersectionObserver options](#intersectionobserver-options)
- [Once](#once)
- [Throttling visibility](#throttling-visibility)
- [Passing custom arguments](#passing-custom-arguments)
- [Disabling the observer](#disabling-the-observer)
- [Example](#example)
- [License](#license)
# Installation
```
npm install --save vue3-observe-visibility
```
**⚠️ This plugin uses the [Intersection Observer API](http://caniuse.com/#feat=intersectionobserver) that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to make it work on incompatible browsers.**
## Import
```javascript
import { createApp } from "vue";
import VueObserveVisibility from "vue3-observe-visibility";
const app = createApp();
app.use(VueObserveVisibility);
```
Or:
```javascript
import { ObserveVisibility as vObserveVisibility } from "vue3-observe-visibility";
```
## Browser
```html
```
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the directives:
```javascript
app.use(VueObserveVisibility);
```
Use specific directives:
```javascript
app.directive("observe-visibility", VueObserveVisibility.ObserveVisibility);
```
# Usage
The `v-observe-visibility` directive is very easy to use. Just pass a function as the value:
```html
```
This also works on components:
```html
```
The function will be called whenever the visiblity of the element changes with the argument being a boolean (`true` means the element is visible on the page, `false` means that it is not).
The second argument is the corresponding [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) object.
```javascript
visibilityChanged (isVisible, entry) {
this.isVisible = isVisible
console.log(entry)
}
```
## IntersectionObserver options
It's possible to pass the [IntersectionObserver `options` object](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters) using the `intersection` attribute:
```html
```
## Once
It can be useful to listen for when the element is visible only once, for example to build introduction animations. Set the `once` option to `true`:
```html
```
## Throttling visibility
You can use the `throttle` options (in ms) specifying minimal state duration after which an event will be fired. It's useful when you are tracking visibility while scrolling and don't want events from fastly scrolled out elements.
```html
```
You can also pass a `leading` option to trigger the callback the first time when the visibility changes without waiting for the throttle delay.
I can either be `visible`, `hidden` or `both`.
```html
```
## Passing custom arguments
You can add custom argument by using an intermediate function:
```html
```
Here `visibilityChanged` will be call with a third custom argument `customArgument`.
## Disabling the observer
Passing a falsy value to the directive will disable the observer:
```html
```
# Example
```html
```
---
## License
[MIT](http://opensource.org/licenses/MIT)
[Forked From](https://github.com/Akryum/vue-observe-visibility#readme)
[npm-version-src]: https://img.shields.io/npm/v/vue3-observe-visibility/latest.svg?style=flat&colorA=18181B&colorB=64B692
[npm-version-href]: https://npmjs.com/package/vue3-observe-visibility
[npm-downloads-src]: https://img.shields.io/npm/dm/vue3-observe-visibility.svg?style=flat&colorA=18181B&colorB=64B692
[npm-downloads-href]: https://npmjs.com/package/vue3-observe-visibility
[license-src]: https://img.shields.io/github/license/ManukMinasyan/vue3-observe-visibility.svg?style=flat&colorA=18181B&colorB=64B692
[license-href]: https://github.com/ManukMinasyan/vue3-observe-visibility/blob/main/LICENSE