react-file-viewer renders any file very small

Question

As much as I have searched about file sizing for react-file-viewer I could not find anything.

I want to use the react-file-viewer to click on a filename hyperlink and open the file (image, document or excel sheeet) in a new page. The rendering works fine, except for the image/document sizing.

I have the following example:

import React from "react";
import FileViewer from "react-file-viewer";
import { Fragment } from "react";
import imGurPic from "./MainBody/imGurPic.ts";

const MainBody = () => {
  const file =imGurPic;    
  const type = "jpeg";

  return (
    <Fragment>
      <FileViewer fileType={type} filePath={file} />
    </Fragment>
  );
};
export default MainBody;

The imGurPic is an image I picked randomly from imGur because of its large size (3024x4032 pixels) (don't worry it is a cat image... link here... I converted into a base64 string that I use in the filePath prop of the FileViewer component. Ultimately, it will be a base64 string coming from a db as a byte array.

In the following sandbox I managed to create a demo, only to find out that it is WAY too small (72*96px). I do not really understand why it would take so little space. Also, any document or excelsheet I enter, the maximum height is 96px. How can I change it? It seems to inherit from a parent element but the Mainbody takes all the available space between header and footer.

Any help on this will be appreciated. Here is the sandbox -->sandbox demo And in case someone cannot open it, here is a screenshot -->

Answer 1

Had to figure this out as well. If you want your image to scale to fit your sizing requirements, just make height=100% in the surrounding div. E.g.

<div style={{ height: '100%' }}>
   <ReactFileViewer />
</div>

If you don't want the image scaled at all, then it's a little trickier. I've had to resort to some messy CSS to override the hardwired width and height settings:

.pg-viewer-wrapper {
    overflow-y: unset !important;
}

.photo-viewer-container {
    width: unset !important;
    height: unset !important;
}

.photo-viewer-container > img {
    width: unset !important;
    height: unset !important;
}

It would be great if this component had features like scaling (e.g. fit, fill, percentage) but I don't think the library is being maintained any more (looking at the old PRs that are still waiting), so would recommend forking and implementing a cleaner solution than what I have done.