# @sil/inview

> Check if the element is inview

Latest version **1.0.2** (published 2019-08-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install @sil/inview
pnpm add @sil/inview
yarn add @sil/inview
bun add @sil/inview
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-08-06 |
| First published | 2019-08-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sil van Diepen |
| Maintainers | hacobvandipyan, silvandiepen |

## Links

- npm: https://www.npmjs.com/package/@sil/inview
- npm.io page: https://npm.io/package/@sil/inview

## Recent versions

- 1.0.2 (latest) — 2019-08-06
- 1.0.1 — 2019-08-06
- 1.0.0 — 2019-08-06

## README

# Inview

A tiny Vue Directive to check and get back the inview percentage of an element. 


### Install

Install the package
`npm install @sil/inview`


Import the package

`import Inview from '~/@sil/inview`

Define the component:

```js
	Vue.directive(Inview);
```

Use the component with default values:

```html
<any-element v-inview />	
```


#### Arguments

| Argument            | Default               | Description                                                                                                         |
| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| root                | null                  | The observer root (from which element should the observer, observe)                                                 |
| margin              | `0px`                 | The observer rootMargin (margin around the observable element)                                                      |
| treshold            | `[0.0, 0.1, ... 1.0]` | Treshold are steps of observing, the more steps the more the function will be called, but it will also get heavier. |
| setClasses          | `true`                | Set classes to the element for inview and out of view                                                               |
| setCustomProperties | `true`                | Set custom properties to the element with the value of inview.                                                      |
| output              | `number`              | Output value by default is a number (between 0 and 1), but can also be a `percentage`                               |
| centered            | `false`               | The output value can be centered, which makes the inview value 1 (number) or 0% (percentage)                        |
| active              | `true`                | Active can be set on false, in that case the directive won't be triggered                                           |
| debug               | `false`               | Output some helpfull debug information                                                                              |

---
_Source: https://npm.io/package/@sil/inview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._