ReferenceSectionWrapper() — supabase Function Reference

Architecture documentation for the ReferenceSectionWrapper() function in Reference.ui.client.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ ReferenceSectionWrapper() — supabase Function Reference

Dependency Diagram

graph TD
  072988b4_0223_3dc4_0036_30a1d5258715["ReferenceSectionWrapper()"]
  b6c39fa8_eb5d_6292_0091_ccda003cb449["safeHistoryReplaceState()"]
  072988b4_0223_3dc4_0036_30a1d5258715 -->|calls| b6c39fa8_eb5d_6292_0091_ccda003cb449
  style 072988b4_0223_3dc4_0036_30a1d5258715 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/Reference.ui.client.tsx lines 30–62

export function ReferenceSectionWrapper({
  id,
  link,
  children,
  className,
}: PropsWithChildren<{ id: string; link: string; className?: string }> &
  HTMLAttributes<HTMLElement>) {
  const initialScrollHappened = useContext(ReferenceContentInitiallyScrolledContext)

  const { ref } = useInView({
    threshold: 0,
    rootMargin: '-10% 0% -50% 0%',
    onChange: (inView) => {
      if (
        inView &&
        initialScrollHappened &&
        window.scrollY > 0 /* Don't update on first navigation to introduction */
      ) {
        safeHistoryReplaceState(link)
      }
    },
  })

  return (
    <section
      ref={ref}
      id={id}
      className={cn('scroll-mt-[calc(var(--header-height)+4rem)]', className)}
    >
      {children}
    </section>
  )
}