useInViewport

一个实用的 React Hook，提供 InViewport 相关功能。

功能特性

• ✅ 核心功能: 提供 InViewport 的核心功能
• ✅ 类型安全: 完整的 TypeScript 类型支持
• ✅ 易于使用: 简洁的 API 设计
• ✅ 性能优化: 高效的实现方式
• ✅ 自动清理: 组件卸载时自动清理资源

基本用法

import useInViewport from "./useInViewport";

function Component() {
  const result = useInViewport();
  
  return <div>使用 useInViewport</div>;
}

高级用法

实际应用场景

function AdvancedComponent() {
  const hookResult = useInViewport(/* 参数 */);
  
  // 根据具体 hook 的功能进行使用
  
  return (
    <div>
      {/* 渲染内容 */}
    </div>
  );
}

API 参考

useInViewport(params?)

参数

根据具体 hook 的功能确定参数类型和说明。

返回值

根据具体 hook 的功能确定返回值类型和说明。

使用场景

1. 场景一: 描述具体的使用场景
2. 场景二: 描述另一个使用场景
3. 场景三: 描述更多使用场景

注意事项

1. 性能: 注意性能相关的使用建议
2. 兼容性: 浏览器兼容性说明
3. 最佳实践: 推荐的使用方式

兼容性

• ✅ React 16.8+
• ✅ TypeScript 4.0+
• ✅ 现代浏览器
• ✅ 服务端渲染 (SSR)

实现源码

查看 useInViewport 的实现

import { useSafeState } from "ahooks";
import { useEffect } from "react";
import getTarget from "../../common/utils/getTarget";

type Options = Pick<
  IntersectionObserverInit,
  "root" | "rootMargin" | "threshold"
>;

const useInViewport = (target: any, options: Options) => {
  const [inviewport, setInViewport] = useSafeState<boolean>();
  const [ratio, setRatio] = useSafeState<number>();

  useEffect(() => {
    const element = getTarget(target);

    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          setInViewport(entry.isIntersecting);
          setRatio(entry.intersectionRatio);
        }
      },
      {
        ...options,
        root: options?.root ? getTarget(options.root) : null,
      }
    );
    observer?.observe(element);

    return () => observer?.disconnect();
  }, [target]);

  return [inviewport, ratio] as const;
};

export default useInViewport;