react-convert-to-image

react-convert-to-image JS library homepage react-convert-to-image JS library on GitHub react-convert-to-image JS library on npm Download react-convert-to-image JS library

Plugin to allow the download of any React component in project (whether currently rendered or not) as a image.

Version 2.0.1 License MIT Vulnerabilities 0
react-convert-to-image JS library homepage
react-convert-to-image JS library on GitHub
react-convert-to-image JS library on npm
Download react-convert-to-image JS library
Keywords
screenshotdownload imageconvert any component to imageimagereact-convert-to-imagedownload screenshotsvgjpegjpgreact.jsreactjsreactreact component snapshot

react-convert-to-image

Plugin to allow the download of React components as html on event trigger with/without preview.

NPM JavaScript Style Guide

Install

    npm install --save react-convert-to-image
    yarn add react-convert-to-image

Usage

  1. Add <div id="download-comp"> to the index.tsx file of your project e.g.

    //... imports here
     import convertToImage from 'react-convert-to-image';
    
    const app = (
      <>
        // any outer wrappers can be used here
        <App />
        <div id="download-comp"></div>
      </>
    );
    
    ReactDOM.render(app, document.getElementById('root'));
    serviceWorker.unregister();
    
  2. Pass the relevant parameters to the downloadSnapshotOfComponentAs

await convertToImage({
  componentToConvert: <MockComponent />,
  type: 'png'
});

License

MIT © deestewie