element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
65 lines (64 loc) • 2.35 kB
TypeScript
import { type MaybePromise } from '@augment-vir/common';
import { type PartInfo } from '../../lit-exports/all-lit-exports.js';
/**
* Callback called by the {@link onIntersect} directive.
*
* @category Internal
*/
export type OnIntersectCallback = (params: {
entry: IntersectionObserverEntry;
allEntries: IntersectionObserverEntry[];
observer: IntersectionObserver;
element: Element;
}) => MaybePromise<void>;
/**
* Options used for the {@link onIntersect} directive.
*
* @category Internal
*/
export type OnIntersectOptions = IntersectionObserverInit;
/**
* A directive that fires its listener any time the element's configured "intersection" is crossed.
* This is commonly use for detecting when an element has scrolled into view. This uses the
* [built-in `IntersectionObserver`
* API](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/IntersectionObserver), so it
* is very efficient.
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, onIntersect} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div
* ${onIntersect({threshold: 1}, ({element, entry}) => {
* if (entry.isIntersecting) {
* console.log('is intersecting!');
* } else {
* console.log('is not intersecting');
* }
* })}
* >
* Some div
* </div>
* `;
* },
* });
* ```
*/
export declare const onIntersect: (options: IntersectionObserverInit, callback: OnIntersectCallback) => import("lit-html/directive.js").DirectiveResult<{
new (partInfo: PartInfo): {
element: Element | undefined;
options: OnIntersectOptions | undefined;
intersectionObserver: undefined | IntersectionObserver;
callback: OnIntersectCallback | undefined;
fireCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
update(partInfo: PartInfo, [options, callback,]: [OnIntersectOptions, OnIntersectCallback]): undefined;
render(options: OnIntersectOptions, callback: OnIntersectCallback): undefined;
readonly _$isConnected: boolean;
};
}>;