useIsInView

1import * as React from "react";
2import { useInView, type UseInViewOptions } from "motion/react";
3 
4interface UseIsInViewOptions {
5  inView?: boolean;
6  inViewOnce?: boolean;
7  inViewMargin?: UseInViewOptions["margin"];
8}
9 
10function useIsInView<T extends HTMLElement = HTMLElement>(
11  ref: React.Ref<T>,
12  options: UseIsInViewOptions = {},
13) {
14  const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
15  const localRef = React.useRef<T>(null);
16  React.useImperativeHandle(ref, () => localRef.current as T);
17  const inViewResult = useInView(localRef, {
18    once: inViewOnce,
19    margin: inViewMargin,
20  });
21  const isInView = !inView || inViewResult;
22  return { ref: localRef, isInView };
23}
24 
25export { useIsInView, type UseIsInViewOptions };