Skip to content

opuu/InView

Repository files navigation

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