# @svelte-put/intersect

> Action that wraps IntersectionObserver

Latest version **4.0.0** (published 2024-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @svelte-put/intersect
pnpm add @svelte-put/intersect
yarn add @svelte-put/intersect
bun add @svelte-put/intersect
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-10-25 |
| First published | 2022-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1039 |
| Author | Quang Phan |
| Maintainers | vnphanquang |
| Keywords | svelte, action, intersect, IntersectionObserver, lazy, load, lazyload |

## Links

- npm: https://www.npmjs.com/package/@svelte-put/intersect
- Repository: https://github.com/vnphanquang/svelte-put
- Homepage: https://github.com/vnphanquang/svelte-put/tree/next/packages/intersect
- Issues: https://github.com/vnphanquang/svelte-put/issues
- npm.io page: https://npm.io/package/@svelte-put/intersect

## Recent versions

- 4.0.0 (latest) — 2024-10-25
- 4.0.0-next.3 (next) — 2024-08-10
- 4.0.0-next.2 — 2024-07-11
- 4.0.0-next.1 — 2024-06-15
- 4.0.0-next.0 — 2024-05-31
- 3.0.1 — 2024-05-17
- 3.0.0 — 2023-07-16
- 2.0.0 — 2023-02-17
- 1.2.1 — 2023-02-06
- 1.2.0 — 2022-12-30
- 1.1.1 — 2022-12-29
- 1.1.0 — 2022-11-19
- 1.0.7 — 2022-11-18
- 1.0.6 — 2022-10-11
- 1.0.5 — 2022-09-19
- … 5 more at https://npm.io/package/@svelte-put/intersect/versions

## README

<div align="center">

# `@svelte-put/intersect`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Svelte action `use:intersect` - wrapper for [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

![demo](https://raw.githubusercontent.com/vnphanquang/svelte-put/next/packages/intersect/static/images/demo.gif)

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { intersect, type IntersectDetail } from '@svelte-put/intersect';

  function onIntersect(e: CustomEvent<IntersectDetail>) {
    const { observer, entries, direction } = e.detail;
    console.log('the observer itself', observer);
    console.log('scrolling direction:', direction);
    console.log('intersecting:', entries[0]?.isIntersecting ? 'entering' : 'leaving');
  }
</script>

<div use:intersect onintersect={onIntersect} onintersectonce></div>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/intersect/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/intersect
[npm]: https://www.npmjs.com/package/@svelte-put/intersect
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/intersect?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/intersect
[repl]: https://svelte.dev/repl/835eacce6ac44aff95a7cb0bb5ca200d
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/intersect
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue

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