useActiveItem() — ui Function Reference

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

Function tsx Internationalization Dictionary called by 1

Entity Profile

Internationalization→ Dictionary→ useActiveItem() — ui Function Reference

Dependency Diagram

graph TD
  b58a4e19_a42e_28eb_fff1_d0591aee40bb["useActiveItem()"]
  f778cd42_0f75_bcf6_65b6_85f12ec2ee89["docs-toc.tsx"]
  b58a4e19_a42e_28eb_fff1_d0591aee40bb -->|defined in| f778cd42_0f75_bcf6_65b6_85f12ec2ee89
  aed6896c_f07c_8f62_8360_451cfdc28e49["DocsTableOfContents()"]
  aed6896c_f07c_8f62_8360_451cfdc28e49 -->|calls| b58a4e19_a42e_28eb_fff1_d0591aee40bb
  style b58a4e19_a42e_28eb_fff1_d0591aee40bb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/docs-toc.tsx lines 15–48

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

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

    for (const id of itemIds ?? []) {
      const element = document.getElementById(id)
      if (element) {
        observer.observe(element)
      }
    }

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

  return activeId
}