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");

or

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";
}

pause() : InView

Pause observing.

elements.pause();

resume() : InView

Resume observing.

elements.resume();

setDelay(delay = 0) : InView

Set delay for callback. Default delay is 0 ms.

elements.setDelay(100);

License

MIT License

Author

Obaydur Rahman

References

• Intersection Observer API
• Intersection Observer API - Browser Support