Skip to main content
.quickLookPreview(props: {
    url?: string;
    setURL?: (url: string | null) => void;
    urls?: string[];
    onLoadingChanged?: (isLoading: boolean) => void;
}): Component
​
props
object
required

​
Support

​
Usage

​
Single file preview

const body = () => {
    const [previewURL, setPreviewURL] = useState(null)
    return VStack([
        Button("Preview PDF", () => setPreviewURL("https://example.com/doc.pdf"))
    ]).quickLookPreview({
        url: previewURL,
        setURL: setPreviewURL,
    })
}

​
Multi-file preview

const body = () => {
    const [previewURL, setPreviewURL] = useState(null)
    const files = [
        "https://example.com/photo1.jpg",
        "https://example.com/photo2.jpg",
        "https://example.com/doc.pdf",
    ]
    return VStack([
        Button("View Files", () => setPreviewURL(files[0]))
    ]).quickLookPreview({
        url: previewURL,
        setURL: setPreviewURL,
        urls: files,
    })
}

​
Notes

  • Quick Look supports many file types including images, PDFs, 3D models, and documents.
  • The preview is presented modally and dismissed by the user or by setting the URL to null.