cozy-viewer
TypeScript icon, indicating that this package has built-in type declarations

11.0.0 • Public • Published

Cozy Viewer

Cozy-Viewer provides a component to show files in a viewer.

Installation

  • You must import 'cozy-viewer/dist/stylesheet.css' somewhere in your app
  • You must have WebviewIntent Provider
  • You must have CozySharing Provider
  • In order to download and display the files, it will need a cozy-client instance in the React context.
  • To have the panels, the app need to have cozy-harvest-lib installed
  • See peer dependencies to be sure to not miss anything

Usage

import Viewer from 'cozy-viewer'

Props

  • files : <array> – One or more io.cozy.files to display
  • currentIndex : <number> – Index of the file to show
  • currentURL : <string> – Optionnal URL of the file
  • className : <string> – CSS classes
  • showNavigation : <boolean> – Whether to show left and right arrows to navigate between files
  • renderFallbackExtraContent : <function> – A render prop that is called when a file can't be displayed
  • disablePanel : <boolean> – Show/Hide the panel containing more information about the file only on Desktop
  • disableFooter : <boolean> – Show/Hide the panel containing more information about the file only on Phone & Tablet devices
  • disableModal : <boolean> – To avoid wrapping the Viewer with a Modal component (wrapper of Viewer)
  • onChangeRequest : <function> - Called with (nextFile, nextIndex) when the user requests to navigate to another file
  • onCloseRequest : <function> - Called when the user wants to leave the Viewer
  • isPublic: <boolean> - Whether the viewer is used in a public page or not
  • componentsProps : <object> – Props passed to components with the same name
    • modalProps : <object> – Props passed to Modal component
    • OnlyOfficeViewer : <object> – Used to open an Only Office file
      • isEnabled : <boolean> – Whether Only Office is enabled on the server
      • opener : <function> – To open the Only Office file
    • toolbarProps : <object> – Toolbar properties
      • toolbarRef : <object> – React reference of the toolbar node
      • showToolbar : <boolean> – Whether to show the toolbar or not. Note that the built-in close button is in the toolbar
      • showClose : <boolean> – Whether to show close button in toolbar
      • showFilePath : <boolean> – Whether to show file path below his name

Readme

Keywords

none

Package Sidebar

Install

npm i cozy-viewer

Weekly Downloads

398

Version

11.0.0

License

MIT

Unpacked Size

588 kB

Total Files

270

Last publish

Collaborators

  • mycozycloud