# visibilityobserver

> Experimental API for observing the visible box of an element.

Latest version **1.1.0** (published 2020-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install visibilityobserver
pnpm add visibilityobserver
yarn add visibilityobserver
bun add visibilityobserver
```

## 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.1.0 |
| Published | 2020-05-22 |
| First published | 2020-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 72.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 52 |
| Author | Jamie Kyle |
| Maintainers | thejameskyle |
| Keywords | visible, visibility, dom, rect, coodinates, top, left, right, bottom, x, y, hidden, scroll, observer, observable, intersectionobserver, intersection, scroll, resize, resizeobserver |

## Links

- npm: https://www.npmjs.com/package/visibilityobserver
- Repository: https://github.com/jamiebuilds/VisibilityObserver
- Homepage: https://github.com/jamiebuilds/VisibilityObserver#readme
- Issues: https://github.com/jamiebuilds/VisibilityObserver/issues
- npm.io page: https://npm.io/package/visibilityobserver

## Alternatives

- [monaco-yaml](https://npm.io/package/monaco-yaml.md) — 420.1K weekly downloads
- [@crewx/workflow](https://npm.io/package/@crewx/workflow.md) — 3.1K weekly downloads
- [yaml-cat](https://npm.io/package/yaml-cat.md) — 38 weekly downloads
- [nunjucks-in-yaml](https://npm.io/package/nunjucks-in-yaml.md) — 9 weekly downloads
- [shopify-symlinks](https://npm.io/package/shopify-symlinks.md) — 3 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-05-22
- 1.0.0 — 2020-05-22

## README

<p align="center">
  <img src=".github/logo.png" width="200" height="200"/>
</P>

# VisibilityObserver

> Experimental API for observing the visible box of an element

## [See Demo](https://jamiebuilds.github.io/VisibilityObserver/)

---

> Note: This implementation currently has some serious performance problems when
> observing many elements or elements deeply nested in the DOM. It's based on
> `requestAnimationFrame()`, `getComputedStyle()`, and `getBoundingClientRect()`
> which can cause additional "layouts" to happen on every frame. In the future
> this library could be refactored to use `ResizeObserver`, `MutationObserver`,
> `IntersectionObserver`, and scroll events in order to be much more performant.

## Install

```sh
npm install --save visibilityobserver
```

## Usage

```js
import VisibilityObserver from "visibilityobserver"

let visibilityObserver = new VisibilityObserver((entries) => {
  for (let entry of entries) {
    if (entry.visibleRect) {
      highlightElem.style.display = "block"
      highlightElem.style.top = entry.visibleRect.top + "px"
      highlightElem.style.left = entry.visibleRect.left + "px"
      highlightElem.style.width = entry.visibleRect.width + "px"
      highlightElem.style.height = entry.visibleRect.height + "px"
    } else {
      highlightElem.style.display = "none"
    }
  }
})

visibilityObserver.observe(divElem)
```

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