[RFC] useInViewport

[coderluojz]

用于滚动内容时，根据视口所在位置，需要选中高亮菜单按钮。抛出回调以便于自定义控制。

API

useInViewport(
  target,
  options?: Options
  callback?: (entry: IntersectionObserverEntry) => void
);

Demo

import React, { useRef, useState } from 'react';
import { useInViewport } from 'ahooks';

const menus = ['menu-1', 'menu-2', 'menu-3'];
const content = {
  'menu-1': 'Content for menus 1',
  'menu-2': 'Content for menus 2',
  'menu-3': 'Content for menus 3',
};

export default () => {
  const menuRef = useRef<Element[]>([]);

  const [activeMenu, setActiveMenu] = useState(menus[0]);

  useInViewport(menuRef.current, { threshold: 0.1 }, (entry) => {
    if (entry.isIntersecting) {
      const active = entry.target.getAttribute('id') || '';
      setActiveMenu(active);
    }
  });

  const handleMenuClick = (menu) => {
    setActiveMenu(menu);
  };
  return (
    <div style={{ width: 300, height: 300, border: '1px solid', display: 'flex' }}>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {menus.map((menu, index) => (
          <li
            key={menu}
            style={{
              padding: '10px',
              backgroundColor: activeMenu === menu ? 'lightgray' : 'white',
            }}
          >
            <span style={{ cursor: 'pointer' }} onClick={() => handleMenuClick(menu)}>
              {menu}
            </span>
          </li>
        ))}
      </ul>
      <div style={{ flex: 1, overflow: 'scroll' }}>
        {menus.map((menu, index) => (
          <div
            ref={(el: any) => {
              menuRef.current[index] = el;
            }}
            key={menu}
            id={menu}
            style={{
              height: 500,
              backgroundColor: 'lightgray',
              padding: 20,
            }}
          >
            {content[menu]}
          </div>
        ))}
      </div>
    </div>
  );
};

[crazylxr]

https://ahooks.js.org/zh-CN/hooks/use-in-viewport 已经有这个hook 了

[coderluojz]

hook是存在的，但是我期望暴露出对应的回调以便于我能进行更多的自定义控制，我提交了一份demo，您可以查看demo详情。 罗静周 ***@***.***  

…

------------------ 原始邮件 ------------------ 发件人: "alibaba/hooks" ***@***.***>; 发送时间: 2023年2月15日(星期三) 上午10:03 ***@***.***>; ***@***.******@***.***>; 主题: Re: [alibaba/hooks] [RFC] useInViewport (Issue #2060) https://ahooks.js.org/zh-CN/hooks/use-in-viewport 已经有这个hook 了 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>