wavelet init

Wavelet/frontend/hooks/use-is-in-view.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {useInView, type UseInViewOptions} from 'motion/react';
+
+interface UseIsInViewOptions {
+  inView?: boolean;
+  inViewOnce?: boolean;
+  inViewMargin?: UseInViewOptions['margin'];
+}
+
+/**
+ * 检测元素是否在视图中
+ *
+ * @example
+ * ```tsx
+ * const { ref, isInView } = useIsInView({ inViewOnce: true })
+ * ```
+ */
+function useIsInView<T extends HTMLElement = HTMLElement>(
+  ref: React.Ref<T>,
+  options: UseIsInViewOptions = {},
+) {
+  const { inView, inViewOnce = false, inViewMargin = '0px' } = options;
+  const localRef = React.useRef<T>(null);
+  React.useImperativeHandle(ref, () => localRef.current as T);
+  const inViewResult = useInView(localRef, {
+    once: inViewOnce,
+    margin: inViewMargin,
+  });
+  const isInView = !inView || inViewResult;
+  return { ref: localRef, isInView };
+}
+
+export { useIsInView, type UseIsInViewOptions };