BlockViewerProvider() — ui Function Reference

Architecture documentation for the BlockViewerProvider() function in block-viewer.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockViewerProvider() — ui Function Reference

Dependency Diagram

graph TD
  bbc7a1f4_d7be_fc92_743e_85ad002ba787["BlockViewerProvider()"]
  1286b7b7_c8bd_53b6_a231_a71e5b6ebd50["block-viewer.tsx"]
  bbc7a1f4_d7be_fc92_743e_85ad002ba787 -->|defined in| 1286b7b7_c8bd_53b6_a231_a71e5b6ebd50
  style bbc7a1f4_d7be_fc92_743e_85ad002ba787 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/block-viewer.tsx lines 83–128

function BlockViewerProvider({
  item,
  tree,
  highlightedFiles,
  children,
}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
  children: React.ReactNode
}) {
  const [view, setView] = React.useState<BlockViewerContext["view"]>("preview")
  const [style, setStyle] =
    React.useState<BlockViewerContext["style"]>("new-york")
  const [activeFile, setActiveFile] = React.useState<
    BlockViewerContext["activeFile"]
  >(highlightedFiles?.[0].target ?? null)
  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)

  return (
    <BlockViewerContext.Provider
      value={{
        item,
        view,
        setView,
        style,
        setStyle,
        resizablePanelRef,
        activeFile,
        setActiveFile,
        tree,
        highlightedFiles,
      }}
    >
      <div
        id={item.name}
        data-view={view}
        className="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
        style={
          {
            "--height": item.meta?.iframeHeight ?? "930px",
          } as React.CSSProperties
        }
      >
        {children}
      </div>
    </BlockViewerContext.Provider>
  )
}