4/24/2023 0 Comments React file viewer![]() As I want to show you as a file viewer, I set the view button by using useState. Npm install react-file-viewer logging-library custom-error // logging-library and custom-error is optional.Ģ. react-file-viewer is required, but logging-library and custom-error is optional(these are recommended to use). This is not very bad for now, but as I already mentioned this library don’t update recently, this could be big issue after a few years later. If we downgrade to react 17, xlsx and csv would work(any other extensions are still working in react 18). Probably because of that, this library can’t support xlsx, csv any more. No support for react18(only xlsx, csv).Īs you might know, react updated and different syntax right now.If your requirement for a file viewer includes ppt, this library is not good fit for you. That’s depends on the situation, but this library does’t support ppt even though the docx and xlsx are supported. This is not so bad, but you need to find a different dependency when this library would stop developing and we can’t use anymore. ![]() The last update time was 2 years ago, which means this library is not updated recently. This is good feature because we don’t need to prepare a class component to use this library. Support for functional components as wellĪlthough the official example was written by class component, this library work in functional component as well.This is very good feature to show user the current situation. This library doesn’t have any garbled text, and when is the downloading time the text of”Loading 0–100%” would appear. I tried to use several file viewer, but I found some garbled text, and a wrong text structure as well. The example has some error components, which is recommended, but it’s still optional(this is not taking time, so I also recommend you to install and use error component as well). This is amazing! Even Video(mp4, webm) and audio(mp3) are supported.Īlthough I will show an example later, this library doesn’t need a lot of code. There might be existing any other viewer which is paid, but this library is free. This library support different extension such as png, docx, xlsx, csv. What are pros and cons for react-file-viewer? Pros This is more secure and we protect documents from any cheating but still needed about viewing any other extensions as well because there are a lot of people who use Microsoft office, and some images as well. I know that the most important document type is PDF nowadays because this document type basically doesn’t allow us to edit. On the other hand, there are a few libraries which can be used for viewing other extensions like png, docx, xlsx, csv. On the one hand, there are many libraries which can be used for viewing pdf. What is react-file-viewer?Īs I mentioned, react file viewer is an npm library which we can view the file without any installation. Finally I found a good library which called “react-file-viewer”, I’ll show you what is react-file-viewer and how to use this library to show an example. Actually, it’s difficult to find very good one even though I found several libraries and explored it. 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.Although I explored some react file viewer libraries to implement “file view function”, which can be seen any files without installation. Also, any document or excelsheet I enter, the maximum height is 96px. I do not really understand why it would take so little space. In the following sandbox I managed to create a demo, only to find out that it is WAY too small (72*96px). Ultimately, it will be a base64 string coming from a db as a byte array. I converted into a base64 string that I use in the filePath prop of the FileViewer component. 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. Import imGurPic from "./MainBody/imGurPic.ts" Import FileViewer from "react-file-viewer" I have the following example: import React from "react" The rendering works fine, except for the image/document sizing. 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. As much as I have searched about file sizing for react-file-viewer I could not find anything.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |