file-viewer/packages/compat/react

@flyfish-group/file-viewer-react

React file preview component. This package is the historical alias of @file-viewer/react and now provides the same native React component experience: it mounts the shared core directly and exposes consistent props, events, and ref APIs.

npm install @flyfish-group/file-viewer-react

import FileViewer from '@flyfish-group/file-viewer-react'

export function Preview() {
  return (
    <div style={{ height: '100vh' }}>
      <FileViewer
        url="/files/demo.docx"
        options={{
          theme: 'light',
          toolbar: { position: 'bottom-right' },
          archive: { cache: true }
        }}
        onViewerEvent={(event) => {
          console.log(event.type, event.event, event.payload)
        }}
      />
    </div>
  )
}

file takes precedence over url. When passing a Blob or ArrayBuffer, also provide name, for example contract.pdf, so the viewer can detect the format:

<FileViewer file={blob} name="contract.pdf" />

options cover theme, watermarking, search, unified zoom, download, print, HTML export, beforeOperation guards, lifecycle hooks, and format-specific settings. Lifecycle, operation availability, search state, and document location updates are emitted through onViewerEvent.

New projects should prefer the standard package name @file-viewer/react. Official documentation: https://doc.file-viewer.app/