mirror of https://melkat.dev/melanie/in-view.git synced 2026-03-06 13:35:19 +00:00

A web component for checking if an element is in view using Intersection Observer https://in-view.melkat.dev/

web-component

Find a file

Melanie Kat 2a03746c49 Delete .DS_Store		2024-11-09 03:24:44 +00:00
.editorconfig	init	2024-08-08 23:37:00 -07:00
in-view.d.ts	init	2024-08-08 23:37:00 -07:00
in-view.js	init	2024-08-08 23:37:00 -07:00
index.html	Update index.html	2024-11-09 03:23:59 +00:00
LICENSE	init	2024-08-08 23:37:00 -07:00
package.json	proper demo	2024-08-13 11:17:49 -07:00
README.md	Update README.md	2024-11-09 03:22:24 +00:00

in-view

A web component for checking if an element is in view using Intersection Observer by wrapping a HTML template tag.

Install

npm install --save @zicklepop/in-view

data-rootMargin string, optional: CSS margin syntax to expand the outside area considered in view. (mdn)
data-threshold float, optional: Sensitivity for how much of the element must be in view, written as a decimal representation of a percentage. (mdn)

To work it only requires a template element around whatever you want to render when in view.

<in-view>
  <template>I show up when I'm in view!</template>
</in-view>