useActiveItem() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives called by 1

Entity Profile

ComponentRegistry→ UIPrimitives→ useActiveItem() — ui Function Reference

Dependency Diagram

graph TD
  904b0d29_b0f1_e8cb_22ca_c7180b344b79["useActiveItem()"]
  9b842276_9b99_ba90_8b96_066d8d6fcd62["toc.tsx"]
  904b0d29_b0f1_e8cb_22ca_c7180b344b79 -->|defined in| 9b842276_9b99_ba90_8b96_066d8d6fcd62
  02e128f4_4a26_1145_9ae1_7b4be4c61adb["DashboardTableOfContents()"]
  02e128f4_4a26_1145_9ae1_7b4be4c61adb -->|calls| 904b0d29_b0f1_e8cb_22ca_c7180b344b79
  style 904b0d29_b0f1_e8cb_22ca_c7180b344b79 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/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
}