@holyfata/unlazy

A package to monitor the element's position.

Usage

Base version

Install the base package:

npm install @holyfata/unlazy

# The usage can be seen at packages/***-component-bundle

// when selector in view, will trigger handleEnter
// when selector leave view, will trigger handleLeave
new Monitor(selector, handleEnter, handleLeave);

// when selector in view, will trigger handleEnter
// when selector leave view, will trigger handleLeave
new Monitor(selector, handleEnter, handleLeave);

new MultiMonitor(
  [selector],
  handleAllEnter,
  handleSomeEnter,
  handleAllLeave,
  handleSomeLeave,
);

Vue version

Install the vue wrapper [recommend]:

npm install @holyfata/unlazy-vue

<template>
  <div style="width: 100vw; height: 100vh"></div>

  <VisibilityWrapper
    selector="#watchedElement"
    @handleVisibility="handleVisibility"
  >
    <template #default="{ isVisible }">
      <div id="watchedElement">
        <p v-if="isVisible">Element is in view</p>
        <p v-else>Element is not in view</p>
      </div>
    </template>
  </VisibilityWrapper>
</template>

<script setup>
import { VisibilityWrapper } from "@holyfata/unlazy-vue";

const handleVisibility = (isVisible) => {
  console.log("Visible :", isVisible);
};
</script>

React version

Install the react wrapper [recommend]:

npm install @holyfata/unlazy-react

import VisibilityWrapper from "@holyfata/unlazy-react";

function App() {
  return (
    <div>
      <div className="app"></div>
      <VisibilityWrapper
        selector="#target-element"
        onVisibilityChange={(isVisible) =>
          console.log("Visibility changed:", isVisible)
        }
      >
        {({ isVisible }) => (
          <div id="target-element">
            {isVisible ? "Element is visible" : "Element is not visible"}
          </div>
        )}
      </VisibilityWrapper>
    </div>
  );
}

export default App;

License

Published under the MIT license. Made by community 💛

---

🤖 auto updated with automd