I'm trying to render basic example from react-pdf official website (https://react-pdf.org/) but app is freezing while i'm trying to use one of rendering options (i tried PDFViever, usePDF hook, PDFDownloadLink).
When im trying the same example on codesandbox.io everything works fine.
Can someone explain why that could happen and whats possible solutions?
Example code:
import {
usePDF,
Page,
Text,
View,
Document,
StyleSheet,
} from "@react-pdf/renderer";
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4"
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
const ContractorCardView = () => {
// if i comment this line and button in JSX - app not freezes
const [instance] = usePDF({document: <MyDocument/>})
return <div>
<button onClick={() => window.open(instance.url)}/>
</div>
};
Button is rendered, but whole page is not responding, so i can't even click it. When i delete\comment button and usePDF hook then app is loading fine, but obviously i cant render PDF that way))
Same code in codesandbox.io works fine: https://codesandbox.io/s/loving-blackwell-l2dks5?file=/src/App.js
