File Viewer
ProA file viewer component for previewing uploaded or linked files.
vu-file-viewer · @velkin/react-pro/file-viewer
A file viewer component for previewing uploaded or linked files.
vu-file-viewer · @velkin/react-pro/file-viewer
npm i @velkin/react-pro
import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");
// @velkin-pro
import { VuFileViewer } from "@velkin/react-pro/file-viewer";| Prop | Type | Default | Description |
|---|---|---|---|
| filepairId | string | "" | Paired picker id that matches `filepairid` on `<vu-file-picker>`. |
| srcSet | string[] | [] | Direct URLs to preview before paired picker files. |
| emptyText | string | "" | Empty-state message shown when no previews are available. |
| layout | VuFileViewerLayout | "grid" | Preview layout mode (`grid` or `list`). |
| density | VuFileViewerDensity | "default" | Preview density (`compact`, `default`, `comfortable`); matches `<vu-file-picker density>`. |
| gridMinWidth | number | 320 | Minimum grid column width (px) when auto columns are used. |
| gridColumns | number | 0 | Fixed grid column count (`0` uses auto-fill). |
| gap | number | 16 | Spacing between preview cards (px). |
| showViewButton | boolean | true | Shows per-file full-size preview action. |
| viewLabel | string | "" | Label for the full-size preview action. |
| showRemoveFromPicker | boolean | true | Shows remove action for files from a paired picker. |
| removeLabel | string | "" | Label for the remove-from-selection action. |
| Slot | Description |
|---|---|
| — | - No slots are exposed; file previews are rendered internally. |
| Part | Description |
|---|---|
| panel | Root preview panel. |
| previews-root | Container for all preview cards (grid or list). |
| file-item | Outer card (container query root for responsive list layout). |
| file-item-layout | Inner flex row/column: preview + header. |
| file-header | File name and plain-text meta line. |
| preview-stage | Preview surface outer region (contains type chrome + viewport). |
| preview-toolbar | Per-kind label row (icon + uppercase type) above the preview media. |
| preview-viewport | Inner area that holds `img`, `video`, `iframe`, `pre`, etc. |
| preview | Alias of `preview-stage`. |
| meta | Plain-text detail line under the file name. |
| img | Image preview (direct child of preview-stage). |
| video | Video preview. |
| iframe | PDF preview. |
| audio | Audio preview. |
| text | Text preview (`pre`). |
| model-viewer | 3D preview (`vu-model-viewer` for GLB/GLTF/STL/OBJ). |
| other | “No inline preview” card when type is unsupported. |
| fullscreen-root | Fixed full-viewport preview layer. |
| fullscreen-backdrop | Dim + blur; click closes. |
| fullscreen-bar | Top row: filename (start) + close (end). |
| fullscreen-close | Close control. |
| fullscreen-content | The file preview only (no inner type chrome). |
| download | Download action link. |
| view-button | Opens the full-size preview dialog for that file. |
| remove-button | Removes this file from the paired `vu-file-picker` selection. |
| Method | Description |
|---|---|
| refreshFromPair | Reloads preview files from the paired `vu-file-picker`. |
| clear | Clears loaded files and resets preview state. |
| Name | Definition |
|---|---|
| VuFileViewerDensity | |
| VuFileViewerLayout | |