Is there any way to convert html tags to react-pdf tags in React?

Question

I am going to convert HTML contents to react-pdf tags using react-pdf render in React.

import {
  Document,
  Page,
  View,
  Text,
  Image,
  StyleSheet
} from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    backgroundColor: '#fff',
    padding: 24
  },
  h1: {
    fontSize: 24,
    fontWeight: 500
  },
  h5: {
    fontSize: 12,
    fontWeight: 500
  },
  ...

const ProposalPDF = ({ content }) => {

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.header}>
          <View>
            <Image
              source="/static/logo.png"
              style={styles.brand}
            />
          </View>
          <View style={styles.flexAlignRight}>
            <Text style={[styles.h1]}>
              Title
            </Text>
            ...

I need to add HTML contents to the Document , but they are showing as pure HTML. What I tried is that I used dangerouslySetInnerHTML inside Text tag. But it didn't work at all.

<Text style={styles.body1} dangerouslySetInnerHTML={{__html: content }} />

What should I use for displaying html contents as PDF view? The HTML contents are produced by Quill editor. So there are some HTML tags including strong , h1 , li , p , br , ol , ul , etc.

Answer 1

I ended up finding a great resource that helped me find a solution here: https://levelup.gitconnected.com/elegant-pdfs-from-user-generated-content-in-react-656b79533fee

I have a helper function that uses DraftJS to filter through the HTML and convert to react-pdf friendly tags.