@empathyco/x-components
Version:
Empathy X Components
49 lines • 2.07 kB
TypeScript
import type { TaggingRequest } from '@empathyco/x-types';
import type { Ref, WatchStopHandle } from 'vue';
import type { WireMetadata } from '../wiring';
/**
* Composable that triggers a callback whenever the provided element appears in the viewport.
* It can trigger the first time only or every time the element appears in the viewport.
*
* @param options - The options to customize the behavior of the composable. The element that
* will be watched, the callback to trigger and if the callback should be triggered only once
* or every time the element appears in the viewport, true by default.
* @returns If the element is currently visible in the viewport or not and the watcher stop handle.
* @public
*/
export declare function useOnDisplay({ element, callback, triggerOnce, }: UseOnDisplayOptions): UseOnDisplayReturn;
/**
* Composable that emits a `TrackableElementDisplayed` event whenever the provided element
* appears in the viewport for the first time.
*
* @param options - The options to customize the behavior of the composable. The element that
* will be watched and the tagging request to emit.
* @returns If the element is currently visible in the viewport or not and the watcher stop handle.
* @public
*/
export declare function useEmitDisplayEvent({ element, taggingRequest, eventMetadata, }: UseEmitDisplayEventOptions): UseOnDisplayReturn;
/**
* Options for the {@link useOnDisplay} composable.
*/
interface UseOnDisplayOptions {
element: HTMLElement | Ref<HTMLElement | null>;
callback: () => void;
triggerOnce?: boolean;
}
/**
* Return type of the {@link useOnDisplay} composable.
*/
interface UseOnDisplayReturn {
isElementVisible: Ref<boolean>;
unwatchDisplay: WatchStopHandle;
}
/**
* Options for the {@link useEmitDisplayEvent} composable.
*/
interface UseEmitDisplayEventOptions {
element: UseOnDisplayOptions['element'];
taggingRequest: TaggingRequest;
eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>;
}
export {};
//# sourceMappingURL=use-on-display.d.ts.map