react document viewer 1

react document viewer

// MyApp.js
import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png'
const type = 'png'

class MyComponent extends Component {
  render() {
    return (
      
    );
  }

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}

Here is what the above code is Doing:
1. Importing the `logging-library` package.
2. Importing the `react-file-viewer` package.
3. Importing the `CustomErrorComponent` component.
4. Creating a `MyComponent` class that extends the `Component` class.
5. Creating a `render` method that returns the `FileViewer` component.
6. Creating an `onError` method that logs the error using the `logging-library` package.
7. Passing the `onError` method to the `FileViewer` component as the `onError` prop.
8. Passing the `CustomErrorComponent` component to the `FileViewer` component as the `errorComponent` prop.

## API

### FileViewer

#### Props

| Name | Type | Default | Description |
| — | — | — | — |
| fileType | string | | The file type of the file to be rendered. |
| filePath | string | | The path to the file to be rendered. |
| onError | function | | A function that is called when an error occurs. |
| errorComponent | React.Component | | A component that is rendered when an error occurs. |
| onLoadSuccess | function | | A function that is called when the file is successfully loaded. |
| onPageRender | function | | A function that is called when a page is rendered. |
| onPageChange | function | | A function that is called when the page changes. |
| onZoom | function | | A function that is called when the zoom level changes. |
| initialPage | number | 1 | The initial page to be rendered. |
| initialScale | number | 1 | The initial zoom level. |
| page | number | | The page to be rendered. |
| scale | number | | The zoom level. |
| workerSrc | string | | The path to the PDF.js worker file. |
| cMapUrl | string | | The path to the PDF.js cMap file. |
| cMapPacked | boolean | | Whether the PDF.js cMap file is packed. |
| onClick | function | | A function that is called when the file is clicked. |
| onMouseMove | function | | A function that is called when the mouse moves over the file. |
| onMouseDown | function | | A function that is called when the mouse is pressed over the file. |
| onMouseUp | function | | A function that is called when the mouse is released over the file. |
| onMouseOver | function | | A function that is called when the mouse enters the file. |
| onMouseOut | function | | A function that is called when the mouse leaves the file. |
| onMouseEnter | function | | A function that is called when the mouse enters the file. |
| onMouseLeave | function | | A function that is called when the mouse leaves the file. |
| onContextMenu | function | | A function that is called when the file is right-clicked. |
| onTouchStart | function | | A function that is called when the file is touched. |
| onTouchMove | function | | A function that is called when the file is touched and moved. |
| onTouchEnd | function | | A function that is called when the file is touched and released. |
| onTouchCancel | function | | A function that is called when the file is touched and cancelled. |
| onScroll | function |

Similar Posts