{"id":13746292,"url":"https://github.com/plangrid/react-file-viewer","last_synced_at":"2026-01-18T01:52:38.653Z","repository":{"id":38325850,"uuid":"91412685","full_name":"plangrid/react-file-viewer","owner":"plangrid","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-13T18:32:13.000Z","size":9221,"stargazers_count":551,"open_issues_count":158,"forks_count":346,"subscribers_count":105,"default_branch":"master","last_synced_at":"2025-04-15T17:52:05.694Z","etag":null,"topics":["public"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plangrid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null}},"created_at":"2017-05-16T04:05:21.000Z","updated_at":"2025-04-09T03:30:54.000Z","dependencies_parsed_at":"2023-02-19T01:45:31.431Z","dependency_job_id":"7434a16b-eb7a-464d-879e-a7571676f73d","html_url":"https://github.com/plangrid/react-file-viewer","commit_stats":{"total_commits":109,"total_committers":16,"mean_commits":6.8125,"dds":0.5688073394495412,"last_synced_commit":"6f9348cfe889f74f315dab4288ab862ff2b78b35"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plangrid%2Freact-file-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plangrid%2Freact-file-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plangrid%2Freact-file-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plangrid%2Freact-file-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plangrid","download_url":"https://codeload.github.com/plangrid/react-file-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253209228,"owners_count":21871612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["public"],"created_at":"2024-08-03T06:00:51.255Z","updated_at":"2026-01-18T01:52:38.619Z","avatar_url":"https://github.com/plangrid.png","language":"JavaScript","funding_links":[],"categories":["File Handling","JavaScript","Repository"],"sub_categories":["Office"],"readme":"\n# react-file-viewer\n\nExtendable file viewer for web\n\n## Supported file formats:\n\n - Images: png, jpeg, gif, bmp, including 360-degree images\n - pdf\n - csv\n - xslx\n - docx\n - Video: mp4, webm\n - Audio: mp3\n\n\n## Usage\n\nNote this module works best with react 16+.  If you are using React \u003c 16 you will likely need to use version 0.5. `npm install react-file-viewer@0.5.0`.\n\nThere is one main React component, `FileViewer`, that takes the following props:\n\n`fileType` string: type of resource to be shown (one of the supported file\nformats, eg `'png'`). Passing in an unsupported file type will result in displaying\nan `unsupported file type` message (or a custom component).\n\n`filePath` string: the url of the resource to be shown by the FileViewer.\n\n`onError` function [optional]: function that will be called when there is an error in the file\nviewer fetching or rendering the requested resource. This is a place where you can\npass a callback for a logging utility.\n\n`errorComponent` react element [optional]: A component to render in case of error\ninstead of the default error component that comes packaged with react-file-viewer.\n\n`unsupportedComponent` react element [optional]: A component to render in case\nthe file format is not supported.\n\nTo use a custom error component, you might do the following:\n\n```\n// MyApp.js\nimport React, { Component } from 'react';\nimport logger from 'logging-library';\nimport FileViewer from 'react-file-viewer';\nimport { CustomErrorComponent } from 'custom-error';\n\nconst file = 'http://example.com/image.png'\nconst type = 'png'\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      \u003cFileViewer\n        fileType={type}\n        filePath={file}\n        errorComponent={CustomErrorComponent}\n        onError={this.onError}/\u003e\n    );\n  }\n\n  onError(e) {\n    logger.logError(e, 'error in file-viewer');\n  }\n}\n```\n\n## Development\n\nThere is a demo app built into this library that can be used for development\npurposes. It is by default served via webpack-dev-server.\n\n### To start demo app\n\n`npm run start` will start the demo app served by webpack-dev-server\n\n### Testing\n\nTests use Jest and Enzyme.\n\nRun tests with:\n\n```\nnpm run test\n```\n\nThis starts Jest in watch mode. To run a particular test file, while in watch mode\nhit `p` and then type the path or name of the file.\n\nSome tests use snapshots. If intended changes to a component cause snapshot tests\nto fail, snapshot files need to be updated (stored in `__snapshots__` directories).\nTo do this run:\n\n```\nnpm run jest --updateSnapshot\n```\n\n### To run the linter\n\n`npm run lint`\n\n### Extending the file viewer\n\nAdding supported file types is easy (and pull requests are welcome!). Say, for\nexample, you want to add support for `.rtf` files. First, you need to create a\n\"driver\" for that file type. A driver is just a component that is capable of\nrendering that file type. (See what exists now in `src/components/drivers`.) After\nyou've created the driver component and added it to `src/components/drivers`, you\nsimply need to import the component into `file-vewer.jsx` and add a switch clause\nfor `rtf` to the `getDriver` method. Ie:\n\n```\ncase 'rtf':\n  return RtfViewer;\n```\n\n## Roadmap\n\n- Remove ignored linting rules and fix them\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplangrid%2Freact-file-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplangrid%2Freact-file-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplangrid%2Freact-file-viewer/lists"}