File reference

Open a file preview from a path reference.

src/app.ts#L1

View code

import { FileReference } from "@stack/ui/file-reference";

export default function Example() {
  return (
    <FileReference.Root
      scopeKey="example"
      load={async () => ({
        kind: "text",
        content: "export const ready = true;",
      })}
    >
      <FileReference.PreviewTrigger
        reference={{ path: "src/app.ts", line: 1 }}
      />
      <FileReference.Preview />
    </FileReference.Root>
  );
}

Usage

import { FileReference } from "@stack/ui/file-reference";

Set scopeKey to the current workspace or conversation. The host loader owns authorization and path resolution; this example returns fixed local content.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

FileReference.Root

Prop	Type	Required	Description
children	ReactNode	Yes	Content rendered inside the component.
scopeKey	string	Yes	Scope to a workspace/conversation. Changing it closes the preview and cancels pending loads.
load	FileReferenceLoader	Yes	Host owns authorization, path resolution, MIME/size validation and URL creation.
recognizeProse	boolean	No	Recognize file references in prose as well as explicit references. Default: false.

FileReference.PreviewTrigger

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
onClick	((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)	No	Handle clicks before the built-in action. Prevent the default event to cancel that action.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
reference	FileLocation	Yes	File path and optional source location.
children	ReactNode	No	Content rendered inside the component.

FileReference.Preview

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: AlertDialogPopupState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: AlertDialogPopupState) => string | undefined)	No	Additional CSS classes for the underlying element.
initialFocus	boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is opened.
finalFocus	boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is closed.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AlertDialogPopupState>	No	Replace the underlying element using render composition.