# mapmeld-react-component-export-image

> export component as jpeg, png, pdf

Latest version **1.0.10** (published 2021-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install mapmeld-react-component-export-image
pnpm add mapmeld-react-component-export-image
yarn add mapmeld-react-component-export-image
bun add mapmeld-react-component-export-image
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2021-06-29 |
| First published | 2021-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 918.1 KB |
| Known vulnerabilities | 0 (+12 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 164 |
| Author | Salman Siddiqui |
| Maintainers | ndoiron |
| Keywords | react, component, export, png, jpeg, pdf |

## Links

- npm: https://www.npmjs.com/package/mapmeld-react-component-export-image
- Repository: https://github.com/salman-monetate/react-component-export-image
- Homepage: https://github.com/salman-monetate/react-component-export-image#readme
- Issues: https://github.com/salman-monetate/react-component-export-image/issues
- npm.io page: https://npm.io/package/mapmeld-react-component-export-image

## Dependencies (2)

- [jspdf](https://npm.io/package/jspdf.md) ^2.3.1
- [mapmeld-html2canvas](https://npm.io/package/mapmeld-html2canvas.md) ^1.0.0-rc.7

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2021-06-29
- 1.0.9 — 2021-06-29
- 1.0.8 — 2021-06-29
- 1.0.7 — 2021-06-29
- 1.0.6 — 2021-06-29

## README

# react-component-export-image

## Demo [Codesandbox](https://codesandbox.io/s/nostalgic-poincare-7xfrl?file=/src/App.js)

## Introduction

- Export component as jpeg, png or pdf
- Each export expect a {React.RefObject} node, optional fileName, and optional html2CanvasOptions object which you wish to pass it to html2Canvas
- exportComponentAsPDF also accepts an optional pdfOptions object with these optional fields {w, h, x, y, unit, orientation, pdfFormat}
```js
w = 100 (Width in pixels - defaults to the width of the element)

h = 50 (Height in pixels - defaults to the height of the element)

x = 0 (X Coordinate in pixels against left edge of the page - defaults to 0)

y = 0 (Y Coordinate in pixels against left edge of the page - defaults to 0)

unit = 'px' (Measurement unit (base unit) to be used when coordinates are specified.
Possible values are "pt" (points), "mm", "cm", "m", "in" or "px". - defaults to 'mm')
    - if you are trying to get the pdf to fill up the exact space, try setting unit to "px"

orientation = 'p' (portrait) OR 'l' (landscape) - defaults: 
    - landscape if width > height
     or 
    - portrait if height > width

The format of the PDF. Can be:

    a0 - a10
    b0 - b10
    c0 - c10
    dl
    letter
    government-letter
    legal
    junior-legal
    ledger
    tabloid
    credit-card

    Default is "a4". If you want to use your own format just pass instead of one of the above predefined formats the size as an number-array, e.g. [595.28, 841.89]
```

## 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
- type is no longer accepted - JPG will always produce JPG, PNG => PNG, PDF => PDF

> exportComponentAsJPEG(node, {fileName, html2CanvasOptions})

- exportComponentAsPDF also accepts an additional pdfOptions object (see introduction)

> exportComponentAsPDF(node, {fileName, html2CanvasOptions, pdfOptions})

## Code Samples

### Component
 ```jsx
import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
import React from 'react';

class ComponentToPrint extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.componentRef = React.createRef();
  }

  render() {
    return (
      <React.Fragment>
        <ComponentToPrint ref={this.componentRef} />
        <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
          Export As JPEG
        </button>
        <button onClick={() => exportComponentAsPDF(this.componentRef)}>
          Export As PDF
        </button>
        <button onClick={() => exportComponentAsPNG(this.componentRef)}>
          Export As PNG
        </button>
      </React.Fragment>
    );
  }
}
```
### Function component
```jsx
import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
import React, { useRef } from 'react';

const ComponentToPrint = React.forwardRef((props, ref) => (
  <div ref={ref}>Hello World</div>
));

const MyComponent = () => {
  const componentRef = useRef();

  return (
    <React.Fragment>
      <ComponentToPrint ref={componentRef} />
      <button onClick={() => exportComponentAsJPEG(componentRef)}>
        Export As JPEG
      </button>
      <button onClick={() => exportComponentAsPDF(componentRef)}>
        Export As PDF
      </button>
      <button onClick={() => exportComponentAsPNG(componentRef)}>
        Export As PNG
      </button>
    </React.Fragment>
  );
};

export default MyComponent;
```

## Installation

```bash
npm i react-component-export-image
or
yarn add react-component-export-image
```

---
_Source: https://npm.io/package/mapmeld-react-component-export-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._