ReactJs Responsive PDF Viewer - reactjs

I trying to show pdf document using ReactJs.
I tried this libraries and its not works like expected .
react-pdf
#react-pdf/renderer
reactjs-pdf-reader
#phuocng/react-pdf-viewer --> this works great only on Desktop , its not works on mobile.
I need to use library that allows to :
zoom
download button
works on mobile
shows page numbers
Thanks :)

Related

Share option in Flutter Webview using react-web-share

I have a app in flutter and using InAppWebView for opening a URL which is developed in React TypeScript.
On that URL page I have Share button.
So I want to share the data using installed apps from the mobile.
I tried using react-web-share Library. But if I click on the button from InAppWebview of the app it showing like below image :
And If I open the same URL from browser the it is working fine and showing options with installed app. As shown in below image
I want the same result from InAppWebView

How can I send a react component as an input to html2canvas and jsPdf?

I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.

Adding navigation control to my google map

Im running react (in the web browser not native) with the react-google-maps component. I want to enable the navigation button (see the red marker) so the map can be opened in my native app. Any suggestions? See the 2 pictures
It doesnt seems like the google maps api has any controls out of the box. A workaround for me is to implement the directionsbutton and https://developers.google.com/maps/documentation/urls/guide from google. When the link opens it will open in the native app if its installed on anroid or ios

PDF view on ReactJs

I am new to ReactJs. I have tried multiple pdf plugins on ReactJs. But I am unable to show as I want. If anybody has used WPS Office you can see the mobile view option on pdf. So how to do make a dynamic mobile view option for pdf?
Any suggestion would help. Thanks.

ReactJS project on Android WebView, Image not showing

I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);

Resources