# react-file-viewer

> Extendable file viewer for web

Latest version **1.2.1** (published 2019-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-file-viewer
pnpm add react-file-viewer
yarn add react-file-viewer
bun add react-file-viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-11-13 |
| First published | 2017-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 11.2 MB |
| Known vulnerabilities | 0 (+9 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 580 |
| Author | PlanGrid |
| Maintainers | aaronnorby, aschiopu, bohdan0, michaelwolo, plangrid-opensource, viktoriyasavkina |

## Links

- npm: https://www.npmjs.com/package/react-file-viewer
- Repository: https://github.com/plangrid/react-file-viewer
- Homepage: https://github.com/plangrid/react-file-viewer#readme
- Issues: https://github.com/plangrid/react-file-viewer/issues
- npm.io page: https://npm.io/package/react-file-viewer

## Dependencies (8)

- [xlsx](https://npm.io/package/xlsx.md) ^0.10.1
- [three](https://npm.io/package/three.md) 0.85.2
- [mammoth](https://npm.io/package/mammoth.md) 1.3.6
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) 1.8.357
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-data-grid](https://npm.io/package/react-data-grid.md) ^5.0.5
- [comma-separated-values](https://npm.io/package/comma-separated-values.md) ^3.6.4
- [react-visibility-sensor](https://npm.io/package/react-visibility-sensor.md) ^5.0.2

## Recent versions

- 1.2.1 (latest) — 2019-11-13
- 1.1.0 — 2019-01-10
- 1.0.0 — 2019-01-08
- 0.5.0 — 2018-07-25
- 0.4.2 — 2018-07-09
- 0.4.1 — 2018-04-27
- 0.4.0 — 2018-03-14
- 0.3.49 — 2017-11-22
- 0.3.48 — 2017-09-27
- 0.3.47 — 2017-06-09
- 0.3.46 — 2017-05-30
- 0.3.45 — 2017-05-30
- 0.3.44 — 2017-05-23
- 0.3.43 — 2017-05-23
- 0.3.42 — 2017-05-23
- … 59 more at https://npm.io/package/react-file-viewer/versions

## README

# react-file-viewer

Extendable file viewer for web

## Supported file formats:

 - Images: png, jpeg, gif, bmp, including 360-degree images
 - pdf
 - csv
 - xslx
 - docx
 - Video: mp4, webm
 - Audio: mp3


## Usage

Note this module works best with react 16+.  If you are using React < 16 you will likely need to use version 0.5. `npm install react-file-viewer@0.5.0`.

There is one main React component, `FileViewer`, that takes the following props:

`fileType` string: type of resource to be shown (one of the supported file
formats, eg `'png'`). Passing in an unsupported file type will result in displaying
an `unsupported file type` message (or a custom component).

`filePath` string: the url of the resource to be shown by the FileViewer.

`onError` function [optional]: function that will be called when there is an error in the file
viewer fetching or rendering the requested resource. This is a place where you can
pass a callback for a logging utility.

`errorComponent` react element [optional]: A component to render in case of error
instead of the default error component that comes packaged with react-file-viewer.

`unsupportedComponent` react element [optional]: A component to render in case
the file format is not supported.

To use a custom error component, you might do the following:

```
// 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 (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

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

## Development

There is a demo app built into this library that can be used for development
purposes. It is by default served via webpack-dev-server.

### To start demo app

`make start` will start the demo app served by webpack-dev-server

### Testing

Tests use Jest and Enzyme.

Run tests with:

```
make test
```

This starts Jest in watch mode. To run a particular test file, while in watch mode
hit `p` and then type the path or name of the file.

Some tests use snapshots. If intended changes to a component cause snapshot tests
to fail, snapshot files need to be updated (stored in `__snapshots__` directories).
To do this run:

```
npm run jest --updateSnapshot
```

### To run the linter

`make lint`

### Extending the file viewer

Adding supported file types is easy (and pull requests are welcome!). Say, for
example, you want to add support for `.rtf` files. First, you need to create a
"driver" for that file type. A driver is just a component that is capable of
rendering that file type. (See what exists now in `src/components/drivers`.) After
you've created the driver component and added it to `src/components/drivers`, you
simply need to import the component into `file-vewer.jsx` and add a switch clause
for `rtf` to the `getDriver` method. Ie:

```
case 'rtf':
  return RtfViewer;
```

## Roadmap

- Remove ignored linting rules and fix them

---
_Source: https://npm.io/package/react-file-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._