motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
29 lines (28 loc) • 818 B
JavaScript
import { ref, watch, isRef, unref } from "vue";
import { inView } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
function useInView(domRef, options) {
const isInView = ref(false);
watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2, onCleanup) => {
const realOptions = unref(options) || {};
const { once } = realOptions;
if (!domRef.value || once && isInView.value) {
return;
}
const onEnter = () => {
isInView.value = true;
return once ? void 0 : () => {
isInView.value = false;
};
};
const cleanup = inView(domRef.value, onEnter, realOptions);
onCleanup(() => {
cleanup();
});
}, {
immediate: true
});
return isInView;
}
export {
useInView
};