https://github.com/ryanatkn/svelte-intersect
a Svelte action for IntersectionObserver
https://github.com/ryanatkn/svelte-intersect
svelte svelte-action
Last synced: 3 months ago
JSON representation
a Svelte action for IntersectionObserver
- Host: GitHub
- URL: https://github.com/ryanatkn/svelte-intersect
- Owner: ryanatkn
- License: mit
- Created: 2023-08-04T01:54:29.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T23:26:09.000Z (9 months ago)
- Last Synced: 2024-09-16T04:54:37.604Z (9 months ago)
- Topics: svelte, svelte-action
- Language: Svelte
- Homepage: https://ryanatkn.github.io/svelte-intersect/
- Size: 1.09 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `svelte-intersect`
> ⚠️ deprecated, moved to [`@ryanatkn/fuz/intersect.js`](https://github.com/ryanatkn/fuz)
> a [Svelte action](https://svelte.dev/docs/svelte-action) for
> [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
- demo: [ryanatkn.github.io/svelte-intersect](https://ryanatkn.github.io/svelte-intersect/)
- npm: [`svelte-intersect`](https://www.npmjs.com/package/svelte-intersect)
- Svelte [repl](https://svelte.dev/repl/fad8afe445344c6ab38caea752a3dec5?version=4.1.2)
- todo
- figure out how to make the `el` type inferred/generic
- does the API need any tweaks? (the negative `count` never disconnecting may be undesirable)
## Usage
```bash
npm i -D svelte-intersect
```
```ts
import {intersect} from 'svelte-intersect';
```
`intersect` is a [Svelte action](https://svelte.dev/docs/svelte-action)
that calls `onintersect` when `el` enters or leaves
the [viewport](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts):
```svelte
void,
ondisconnect: ({intersecting, intersections, el, observer}) => void,
count: 1, // 1 is like 'once', 0 disables, <0 or undefined is infinite
options: {threshold, root, rootMagin}, // `IntersectionObserver` options
}}>
```
All options are optional.
```ts
export interface Intersect_Params {
/**
* Called when the element enters or leaves the viewport until disconnected.
*/
onintersect?: On_Intersect;
/**
* Called when the action's observer is disconnected,
* either by the user calling disconnect or the action being destroyed.
*/
ondisconnect?: On_Disconnect;
/**
* A value of `1` disconnects after `el` enters and leaves the viewport one time,
* similar to 'once' for an event.
* `0` disables and `undefined` or a negative number like `-1` never disconnects.
*/
count?: number;
/**
* Same as the `options` param to
* [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)
*/
options?: IntersectionObserverInit;
}
export interface On_Intersect {
(state: Intersect_State): void;
}
export interface Intersect_State {
intersecting: boolean;
intersections: number;
el: HTMLElement | SVGElement;
observer: IntersectionObserver;
disconnect: () => void;
}
export interface On_Disconnect {
(state: Disconnect_State): void;
}
export interface Disconnect_State {
intersecting: boolean;
intersections: number;
el: HTMLElement | SVGElement;
observer: IntersectionObserver;
}
```
For more see the
[IntersectionObserver docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
on MDN, the demo at [ryanatkn.github.io/svelte-intersect](https://ryanatkn.github.io/svelte-intersect/),
and [the implementation](/src/lib/index.ts).
## License
[MIT](LICENSE)