Package Exports
- @svelte-put/intersect
- @svelte-put/intersect/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@svelte-put/intersect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Table of Contents
Show / hide
svelte-put
This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.
Acknowledgement
This package employs svelte action strategy. If you are looking for a more declarative html solution, check out metonym's implementation.
Changelog
Installation
npm install -D @svelte-put/intersectyarn add -D @svelte-put/intersectpnpm add -D @svelte-put/intersectUsage
See examples here. Also check out the Svelte REPL.
Documentation
Typescript support
Ambient types for custom events should be available automatically where intersect is imported.
show / hide
<script lang="ts">
import { intersect } from '@svelte-put/intersect';
</script>
<!-- on:intersect, on:intersectonce should be typed -->
<div
use:intersect
on:intersect
on:intersectonce
/>If the above is not working, fall back to this:
app.d.ts: show / hide
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
// Typescript support in svelte-kit, see
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error
declare namespace svelte.JSX {
interface HTMLAttributes<T> {
// on:intersect
onintersect?: (event: CustomEvent<import('@svelte-put/intersect').IntersectDetail>) => void;
// on:intersectonce
onintersectonce?: (event: CustomEvent<import('@svelte-put/intersect').IntersectDetail>) => void;
}
}For detailed documentation, see the extracted API.
