feat: add useInViewport #171
Conversation
src/useInViewport/index.ts
Outdated
| function useInViewport<T extends HTMLElement = HTMLElement>( | ||
| ...args: [Arg] | [] | ||
| ): [boolean, MutableRefObject<T>?] { | ||
| const [inViewPort, setInViewport] = useState<boolean>(false); |
There was a problem hiding this comment.
初始值是不是 undefined 比较好？这样能给用户区分是 “真的不可见” 还是 “没有初始化完成” 留一些余地。。
There was a problem hiding this comment.
如果用户传的是一个确定的 dom 进来，这里是不是应该初始化为 当前的 true/false ？
There was a problem hiding this comment.
你觉得 useInVewport 和 Intersection Observer API 是什么关系呢？是不是功能可以增强下？
比如：
- 可以拿到 div 可视区域的百分比
- threshold，root，rootMargin 的设置等等。
不过加上之后会不会有点复杂？建议可以考虑下~
不加问题也不大，以后可以迭代。
src/useInViewport/index_cn.mdx
Outdated
|
|
||
| ### 基本用法 | ||
|
|
||
| <JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='基本用法' description='使用 ref 监听节点尺寸变化'> |
There was a problem hiding this comment.
描述写错了。
可以加上“向上滚动，查看效果”等类似的话术。
|
记得从 src/index.ts 导出一下 |
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/umijs/hooks/q60841tbd |
src/useInViewport/index.ts
Outdated
|
|
||
| const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight | ||
| const top = el.getBoundingClientRect() && el.getBoundingClientRect().top | ||
| return top <= viewPortHeight |
There was a problem hiding this comment.
测试了一下，这个不太对。
如果元素在窗口上面，isInViewPort 永远返回 true.
No description provided.