React Native Export Whole Content of Scroll View into PDF - reactjs

I am currently working on a react-native project and I am facing the following problem:
I have a ScrollView with dynamic size. I would like to be able to export the content of the ScrollView into a PDF on click of a button. It is like creating a screenshot that scrolls through my whole view before saving the image into a pdf. How can I achieve that ?
I know that there is a component called "react-pdf" that I can use to render my own pdf. Is this the way to go ?
I have also seen that there is a component called "react-native-view-shot" which takes a picture of a view. But in my case it is a ScrollView so I don't think that it will work

Related

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.

How to use component as a route in Next.js?

I would like to build something similar to what Facebook has, a popup with dynamic content inside (image, text, etc.). So when you would click on an item it would open up a popup and url would be something like /post/343542.
I already have a component which shows up and displays the data, I'm struggling with router part of it. How to use a component in a route?
Thanks!

Ant Design Layout Component

I have a very basic implementation of ant design in a react project. I used create-react-app and have went through the suggested steps detailed in the antd documentation.
The problem i have is resizing the Content section of the Layout component. Currently, even though my Dragger component is wrapped within Content component, it is appearing below it. The Content component is represented by the Grey area on the screen. Attempts at resizing it using styling have not yielded desired results.
Here is the code pen. Im simply trying to ensure that the Upload box is located within the Content section, and not below it.
Any help would be awesome!
You've wrapped the Dragger component in a div that is absolutely positioned in the center of the body, so it's disregarding the regular content flow. If you remove that inline CSS it will behave as you'd expect.

Create a Preview Pane Control in React

I need to create a React Component similar to a preview pane. These are search result so what I need the component to do is when the user clicks the "Preview" link or button a smaller panel opens up to show a preview. I have the URL text that I need to send to the control to generate the preview (these are search results from a SharePoint REST api call).
What I need to know since I am new to react, is what kind of component do I need to create. I am working in Visual Studio 2017 and have had success creating generic React components using this code :
import React, { Component } from 'react';
directive, so I am familiar with creating the Components, I just don't know which components to use. Can someone help with with the types of component I should use to build a simple preview? I am not necessarily looking for code, just a list of components to use or a link to tutorial
Thanks
I was able to create the control using an IFrame to host the "preview" url. The problem was with the URL that was being passed in.

how to use Parent-child transitions with Material-ui on desktop

I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?

Resources