Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plangrid/react-file-viewer
https://github.com/plangrid/react-file-viewer
public
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/plangrid/react-file-viewer
- Owner: plangrid
- License: mit
- Created: 2017-05-16T04:05:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-24T03:28:14.000Z (10 months ago)
- Last Synced: 2024-01-26T12:08:00.282Z (10 months ago)
- Topics: public
- Language: JavaScript
- Size: 8.59 MB
- Stars: 489
- Watchers: 99
- Forks: 322
- Open Issues: 153
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Authors: AUTHORS.md
Awesome Lists containing this project
- best-of-react - GitHub - 91% open · ⏱️ 30.01.2024): (File Handling)
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 [email protected]`.
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 (
);
}
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
`npm run start` will start the demo app served by webpack-dev-server
### Testing
Tests use Jest and Enzyme.
Run tests with:
```
npm run 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
`npm run 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