# on-intersect

> Call back when an element intersects with another

Latest version **2.0.0** (published 2017-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install on-intersect
pnpm add on-intersect
yarn add on-intersect
bun add on-intersect
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-09-14 |
| First published | 2017-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Maintainers | yoshuawuyts |
| Keywords | intersect, intersect, dom, api |

## Links

- npm: https://www.npmjs.com/package/on-intersect
- Repository: https://github.com/yoshuawuyts/on-intersect
- Homepage: https://github.com/yoshuawuyts/on-intersect#readme
- Issues: https://github.com/yoshuawuyts/on-intersect/issues
- npm.io page: https://npm.io/package/on-intersect

## Dependencies (2)

- [global](https://npm.io/package/global.md) ^4.3.1
- [is-dom](https://npm.io/package/is-dom.md) ^1.0.7

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2017-09-14
- 1.1.0 — 2017-01-08
- 1.0.1 — 2017-01-08
- 1.0.0 — 2017-01-08

## README

# on-intersect [![stability][0]][1]
[![npm version][2]][3] [![build status][4]][5]
[![downloads][8]][9] [![js-standard-style][10]][11]

Call back when an element intersects with another.

## Usage
```js
var onIntersect = require('on-intersect')
var html = require('bel')

var el = html`<h1>Yay, we're a heading!</h1>`

onIntersect(el, function () {
  console.log('Woot, component is visible!')
})

document.body.appendChild(html`
  <main>
    <div style="height: 110vh"></div>
    ${el}
    <div style="height: 110vh"></div>
  </main>
`)
```

## API
### stopObserving = onViewport(element, [opts], [onEnter], [onExit])
Call `onEnter` when an element scrolls into view, and `onExit` when an element
scrolls out of view.  `opts` can be any value passed into the
[InterSectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)
constructor.

### stopObserving()
Stop the observer.

## Installation
```sh
$ npm install on-intersect
```

## Further Reading
- [MDN/Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

## Authors
- [Finn Pauls](https://github.com/finnp)
- [Yoshua Wuyts](https://github.com/yoshuawuyts)

## License
[MIT](https://tldrlegal.com/license/mit-license)

[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
[1]: https://nodejs.org/api/documentation.html#documentation_stability_index
[2]: https://img.shields.io/npm/v/on-intersect.svg?style=flat-square
[3]: https://npmjs.org/package/on-intersect
[4]: https://img.shields.io/travis/yoshuawuyts/on-intersect/master.svg?style=flat-square
[5]: https://travis-ci.org/yoshuawuyts/on-intersect
[6]: https://img.shields.io/codecov/c/github/yoshuawuyts/on-intersect/master.svg?style=flat-square
[7]: https://codecov.io/github/yoshuawuyts/on-intersect
[8]: http://img.shields.io/npm/dm/on-intersect.svg?style=flat-square
[9]: https://npmjs.org/package/on-intersect
[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[11]: https://github.com/feross/standard

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