2024-10-14 12:38:53 +08:00

31 lines
1.1 KiB
TypeScript

import { useEffect } from 'react'
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
export const useScrollIntersection = (
anchorRef: React.RefObject<HTMLDivElement>,
) => {
const containerRef = usePluginPageContext(v => v.containerRef)
const intersected = useMarketplaceContext(v => v.intersected)
const setIntersected = useMarketplaceContext(v => v.setIntersected)
useEffect(() => {
let observer: IntersectionObserver | undefined
if (containerRef?.current && anchorRef.current) {
observer = new IntersectionObserver((entries) => {
const isIntersecting = entries[0].isIntersecting
if (isIntersecting && !intersected)
setIntersected(true)
if (!isIntersecting && intersected)
setIntersected(false)
}, {
root: containerRef.current,
})
observer.observe(anchorRef.current)
}
return () => observer?.disconnect()
}, [containerRef, anchorRef, intersected, setIntersected])
}