useActiveItem() — supabase Function Reference

Architecture documentation for the useActiveItem() function in toc.tsx from the supabase codebase.

Function tsx ContentManagement Collections called by 1

Entity Profile

ContentManagement→ Collections→ useActiveItem() — supabase Function Reference

Dependency Diagram

graph TD
  53855881_fed4_0d46_800f_c31662340efb["useActiveItem()"]
  d800ca79_7603_ed26_58f3_72050ffcd1f7["DashboardTableOfContents()"]
  d800ca79_7603_ed26_58f3_72050ffcd1f7 -->|calls| 53855881_fed4_0d46_800f_c31662340efb
  style 53855881_fed4_0d46_800f_c31662340efb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/learn/components/toc.tsx lines 41–74

function useActiveItem(itemIds: string[]) {
  const [activeId, setActiveId] = React.useState(null)

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id)
          }
        })
      },
      { rootMargin: `0% 0% -80% 0%` }
    )

    itemIds?.forEach((id) => {
      const element = document.getElementById(id)
      if (element) {
        observer.observe(element)
      }
    })

    return () => {
      itemIds?.forEach((id) => {
        const element = document.getElementById(id)
        if (element) {
          observer.unobserve(element)
        }
      })
    }
  }, [itemIds])

  return activeId
}