useActiveItem() — supabase Function Reference

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

Function tsx DesignSystem ThemeEngine called by 1

Entity Profile

DesignSystem→ ThemeEngine→ useActiveItem() — supabase Function Reference

Dependency Diagram

graph TD
  01aed1eb_a147_0274_089a_456b5b8b04fb["useActiveItem()"]
  8d0a2728_f944_370c_62be_f78aabddbbd3["DashboardTableOfContents()"]
  8d0a2728_f944_370c_62be_f78aabddbbd3 -->|calls| 01aed1eb_a147_0274_089a_456b5b8b04fb
  style 01aed1eb_a147_0274_089a_456b5b8b04fb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/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
}