Copy
.quickLookPreview(props: {
url?: string,
setURL?: (url: string | null) => void,
urls?: string[],
onLoadingChanged?: (isLoading: boolean) => void
}): Component;
Parameters
Configuration object for Quick Look preview functionality.
Show properties
Show properties
The current URL of the file to preview using Quick Look.
Callback function to update the current preview URL. This is called when the user navigates between different files in the preview. Can be set to null to dismiss the preview.
Optional array of URLs for multi-item preview navigation. When provided, users can navigate between multiple files within the Quick Look interface using swipe gestures or navigation controls.
Optional callback that is called when the loading state of the preview changes. Receives
true when loading starts and false when loading completes.Support
Usage
Basic file preview
Copy
const [currentUrl, setCurrentUrl] = useState(undefined);
Image({url: "document.png"})
.quickLookPreview({
url: currentUrl,
setURL: setCurrentUrl
})
.onTapGesture(() => {
setCurrentUrl("document.pdf");
})
Preview with loading state
Copy
const [currentUrl, setCurrentUrl] = useState(undefined);
const [isLoading, setIsLoading] = useState(false);
Button("Preview Document", () => {})
.quickLookPreview({
url: currentUrl,
setURL: setCurrentUrl,
onLoadingChanged: setIsLoading
})
.onTapGesture(() => {
setCurrentUrl("https://example.com/report.pdf");
})
Multi-file preview navigation
Copy
const [currentUrl, setCurrentUrl] = useState(undefined);
const documentUrls = documents.map(doc => doc.url);
Text("View Reports")
.quickLookPreview({
url: currentUrl,
setURL: setCurrentUrl,
urls: documentUrls
})
.onTapGesture(() => {
setCurrentUrl(documents[0].url);
})