score:3

Accepted answer

Seems like a known issue when using hooks: https://github.com/gregnb/react-to-print/issues/214

As an alternative, you can avoid the useRef hook and follow the example in the source repo which seems to work in TypeScript:

https://github.com/gregnb/react-to-print/blob/master/example/index.tsx

i.e., the first example on the npm readme doc: https://www.npmjs.com/package/react-to-print#example

score:9

You can define the type for useRef to get rid of the ts error credit to shane935:

const componentRef = useRef<HTMLDivElement>(null)

And if you, like me, are using functional components you will get a problem trying to use that ref following react-to-print class based components. To bypass this error you can wrap your component you wish to print in a div:

<ReactToPrint
  trigger={() => <Button variant="contained" color="primary">Generar</Button>}
  content={() => componentRef.current}
/>
<div ref={componentRef}>
  <PrintableComponent />
</div>

Everything inside this div will be printed.


Related Query

More Query from same tag