reactjs - React component export as PNG with a transparent background

Question

I'm trying to use exportComponentAsPNG function from react-component-export-image lib: https://www.npmjs.com/package/react-component-export-image

exportComponentAsPNG(node, {fileName, html2CanvasOptions})

The function works great if I pass just a component. But I can't make it work with optional params and produce an image with transparent background (maybe I'm missing something about optional parameters conversion of JS in general). So I tried to pass a backgroundColor option, which, I think, should help me with getting a transparent background. What I've already tried:

• exportComponentAsPNG(node, backgroundColor = null);
• exportComponentAsPNG(node, backgroundColor: null);
• exportComponentAsPNG(node, { backgroundColor: null });

I could specify backgroundColor with the previous version of react-component-export-image API, but now I'm getting lost with the new syntax.

question from:https://stackoverflow.com/questions/65918916/react-component-export-as-png-with-a-transparent-background

Answer 1

As it is mentioned in the docs

How to Upgrade

The previous way of using an export looked like this:

exportComponentAsJPEG(node, fileName, type, backgroundColor, options)

• The new way: pass node & an optional object with only the fields you need.
• backgroundColor is no longer accepted in this main object, but is accepted in the "html2CanvasOptions" object, which is passed directly to html2canvas

if you say it've worked before with backgorundColor equals to null you should call it this way

exportComponentAsPNG(node, { html2CanvasOptions: {backgroundColor: null} })

you can also take look at its implementation src-code