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.
Using InView is easy.
Install it from npm, pnpm or yarn
npm install @opuu/inview
pnpm install @opuu/inview
yarn add @opuu/inview
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>
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
});
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;
}
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 observing.
elements.pause();
Resume observing.
elements.resume();
Set delay for callback. Default delay is 0 ms.
elements.setDelay(100);
MIT License