exposure's Introduction

exposure

A set of web automatic exposure buried point solutions. when page load, the plugin will auto call the callback function if dom intersection. in the callback,you can collect data for reporting.

Features

🚀 1KB Component average size
🚀 Native script
🚀 Zero third-party dependencies
💪 Written in TypeScript
📖 Extensive documentation and demos
🍭 Support all project
🍭 Support Tree Shaking

Installation

npm i @zaobao/exposure

Using yarn

yarn add @zaobao/exposure;

Using pnpm

pnpm add @zaobao/exposure;

Quickstart

Using ESM

// import Api
import Exposure from "@zaobao/exposure";

Using CommonJs

const Exposure = require("@zaobao/exposure");

Using iife

<script src="pathto/dist/index.browser.js"></script>

Getting Started

type IntersectionObserverInit = {
    root?: Element | Document | null;
    rootMargin?: string;
    threshold?: number | number[];
}
declare class Exposure {
    private Observer;
    constructor(options?: IntersectionObserverInit);
    observe(els: IElement | IElement[], callback: Function): void;
    unobserve(el: IElement | IElement[] | HTMLCollection): void;
    stop(): void;
}

//example
    const doms = document.querySelector(".class");
    const exposure = new Exposure(
        options
    );
    const callback = (isIntersection,stop)=>{
        if(isIntersection){
            stop()
            //todo
        }
    }
    exposure.observe(doms,callback)

Browser support

We use interactionObvser api for support, and add polyfill in very old browser.so you don't do anything for the polyfill，Use it with peace of mind. With these polyfills, IntersectionObserver has been tested and known to work in the following browsers: