Mi caso de uso es simple. Tengo un componente de reacción que toma algunos accesorios y genera algo. Ahora quiero descargarlo como una imagen sin renderizarlo, básicamente sin mostrárselo al usuario. html2canvas y react-component-export-image . En ambas bibliotecas, logré capturar la captura de pantalla, pero ambas requirieron que renderizara el componente.

Usé el código de esta página para react-component-export-image https://www.npmjs.com/package/react-component-export-image

Supongamos que el siguiente es mi componente

 const Component1 = ({ reference }) => { return ( <div ref={reference} > <div className="share-cause-header"> Some header stuff </div> <div className="share-cause-body"> some body stuff </div> <div className="share-cause-footer"> some footer stuff </div> </div> ); };

Ahora, en otro Component2 , quiero enviar algunos accesorios a mi Component1 y luego descargar ese componente como una imagen sin mostrar nada al usuario. Un usuario solo debe ver el botón de descarga y la imagen descargada

 const Component2 = () => { const shareButtonImageDownload = (e) => { e.stopPropagation(); console.log("Hi there"); }; return ( <div > <button onClick={shareButtonImageDownload } ></button> </div> ); };