Can react-pdf download the components outside its components?

[AnhQuynh0104]

I used other components not react-pdf lib components and when I downloaded it, the other components were missing. Does react-pdf support outside component?

import React from 'react'
import {
  PDFDownloadLink,
  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 MyComponent = () => {
  return <div>My Component</div>
}

const MyDoc = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
        <MyComponent />
      </View>
    </Page>
  </Document>
)

function Demo() {
  return (
    <div>
      <PDFDownloadLink document={<MyDoc />} fileName="myfile.pdf">
        {({ blob, url, loading, error }) =>
          loading ? 'Loading document...' : 'Download now!'
        }
      </PDFDownloadLink>
    </div>
  )
}

export default Demo

This is my file after download

[wojtekmaj]

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.