Skip to main content

main

Perceptible can be integrated into your web projects using modern package managers, ES module imports, or direct CDN script tags.

Installation Options​

1. Package Manager (npm / yarn / pnpm)​

Install the package via your preferred package manager:

npm install perceptible
# or
yarn add perceptible
# or
pnpm add perceptible

2. Direct CDN Script Tag​

For quick prototyping or traditional static HTML sites, include the compiled distribution bundle via CDN:

<!-- Include latest Perceptible bundle -->
<script src="https://cdn.jsdelivr.net/gh/anubhavsrivastava/perceptible@master/dist/bundle.js"></script>

When included via script tag, Perceptor is registered globally on window.Perceptor.

Module Usage​

Import Perceptor into your client-side JavaScript or TypeScript application:

import Perceptor from 'perceptible';

// Initialize on target element
const observer = new Perceptor(document.querySelector('#target-element'), {
  threshold: 50,
});

// Start tracking viewability
observer.watch();

TypeScript Support​

Perceptible is written in TypeScript and provides native type definitions out of the box. No separate @types/perceptible installation is required.

You can import types like SpectatorResult, SubView, and Config directly:

import Perceptor, { SpectatorResult, Config } from 'perceptible';

const options: Partial<Config> = {
  threshold: 50,
  subscribers: [
    (instance: Perceptor, data: SpectatorResult) => {
      console.log('Visibility:', data.isVisible);
    }
  ]
};

const observer = new Perceptor(element, options);
observer.watch();
Production Ready

Perceptible is stable and production-ready. Automated end-to-end and unit test suites are fully integrated to guarantee high-performance, zero-dependency viewability tracking.

Next Steps​