Text rendering into @react-pdf/renderer

640 Views Asked by At

I have an object obj with the field Notes that stores a value like this:

const obj = {
  Notes: "Dial Size 100 mm\r\nBOTTOM CONN. 1/2'' NPT (M)\r\nIP 65, Dry but fillable, glycerine\r\nNR. 33 PCS RANGE 0/4 KG/CM2\r\nNR. 72 PCS RANGE 0/10 KG/CM2\r\nNR.100 PCS RANGE 0/16 KG/CM2\r\nNR. 75 PCS RANGE 0/60 KG/CM2\r\n*"
}

I'm trying to put this text into a PDF using @react-pdf/rendered:

<Text style={{ padding: 2, fontSize: 10, paddingTop: 10, wordWrap: 'break-word' }}>
  { 
    el.Notes.replace('*', '')
            .replace(/Goods of [a-zA-Z]+ [a-zA-Z]+/, '')
            .replace('with calibration certificate', '')
            .replace(/KG\/CM2/g, 'Kg/cm&sup2;')
            .replace(/\s+/g, ' ')
            .replace('-', '\n')
            .replace(',', '\n')
  }
</Text>

I don't understand why the \r\n contained into the Notes field are ignored. When the pdf is generated the line is not broken. Another issues is with the &sup2;, it's print the text as plain insted of rendering Kg/cm2. It seems that all the superscipts are rendered as plain text.

1

There are 1 best solutions below

0
On

Writing {'\n'} instead of '\n' can apparently help : https://github.com/diegomura/react-pdf/issues/1032