@opuu/inview NPM

InView: Is it in viewport?

A library to checks if an element is visible in the viewport.

Lazyload any content, animate elements on scroll, infinite scrolling and many more things can be done with this simple, tiny library.

Getting Started

Using InView is easy.

Install

Install it from npm, pnpm or yarn

npm install @opuu/inview

pnpm install @opuu/inview

yarn add @opuu/inview

Import

For module bundlers like webpack, rollup, parcel, etc.

import InView from "@opuu/inview";

For browsers that support ES modules, you can use the script tag with type="module".

<script type="module">
  import InView from "node_modules/@opuu/inview/dist/inview.js";
</script>

Or you can directly import it from CDN.

<script>
  import InView from "https://cdn.jsdelivr.net/npm/@opuu/inview/dist/inview.js";
</script>

Usage

You can use InView in two ways.

Directly selecting the elements

const elements = new InView(".css-selector");

elements.on("enter", (event) => {
  console.log(event);
  // do something on enter
});

elements.on("exit", (event) => {
  console.log(event);
  // do something on exit
});

or configuring it for more control.

const element = new InView({
    selector: ".css-selector",
    delay: 100,
    precision: "high",
    single: true,
});

element.on("enter", (event) => {
  console.log(event);
  // do something on enter
});

element.on("exit", (event) => {
  console.log(event);
  // do something on exit
});

For TypeScript users, you can import the types and use it like this.

import InView, { InViewConfig, InViewEvent } from "@opuu/inview"

const config: InViewConfig = {
  selector: ".css-selector",
  delay: 0,
  precision: "medium",
  single: true,
};

const element: InView = new InView(config);

element.on("enter", (event: InViewEvent) => {
  console.log(event);
  // do something on enter
});

element.on("exit", (event: InViewEvent) => {
  console.log(event);
  // do something on exit
});

Methods

constructor(config: InViewConfig | string): InView

Create a new instance of InView.

const elements = new InView(".css-selector");

const element = new InView({
    selector: ".css-selector",
    delay: 100,
    precision: "high",
    single: true,
});

The config object is an instance of InViewConfig interface. Here are the properties of the config object and their default values.

Property	Type	Required	Default	Description
selector	string	true		CSS selector for the elements to observe.
delay	number	false	0	Delay in milliseconds for callback.
precision	"low" \| "medium" \| "high"	false	"medium"	Precision of the intersection observer.
single	boolean	false	false	Whether to observe only the first element or all the elements.

Here is the interface for the config object.

interface InViewConfig {
  selector: string;
  delay?: number;
  precision?: "low" | "medium" | "high";
  single?: boolean;
}

on(event: "enter" | "exit", callback: CallableFunction): InView

Add event listener for enter and exit events.

elements.on("enter", (event) => {
  console.log(event);
  // do something on enter
});

elements.on("exit", (event) => {
  console.log(event);
  // do something on exit
});

The event object is an instance of InViewEvent interface. Here are the properties of the event object.

Property	Type	Description
percentage	number	Percentage of the element visible in the viewport.
rootBounds	DOMRectReadOnly \| null	The rectangle that is used as the intersection observer's viewport.
boundingClientRect	DOMRectReadOnly	The rectangle describing the element's size and position relative to the viewport.
intersectionRect	DOMRectReadOnly	The rectangle describing the intersection between the observed element and the viewport.
target	Element	The observed element.
time	number	The time at which the event was triggered.
event	"enter" \| "exit"	The event type.

Here is the interface for the event object.

interface InViewEvent {
  percentage: number;
  rootBounds: DOMRectReadOnly | null;
  boundingClientRect: DOMRectReadOnly;
  intersectionRect: DOMRectReadOnly;
  target: Element;
  time: number;
  event: "enter" | "exit";
}