# react-polygon-image-cropper

> ## Demo

Latest version **1.0.0** (published 2022-07-01) · 0 weekly downloads

## Install

```sh
npm install react-polygon-image-cropper
pnpm add react-polygon-image-cropper
yarn add react-polygon-image-cropper
bun add react-polygon-image-cropper
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-07-01 |
| First published | 2022-06-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 27.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Brendan Ang |
| Maintainers | bbawj |
| Keywords | react, typescript, polygon, image, cropper |

## Links

- npm: https://www.npmjs.com/package/react-polygon-image-cropper
- Repository: https://github.com/bbawj/react-polygon-image-cropper
- Homepage: https://github.com/bbawj/react-polygon-image-cropper#readme
- Issues: https://github.com/bbawj/react-polygon-image-cropper/issues
- npm.io page: https://npm.io/package/react-polygon-image-cropper

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-07-01
- 0.0.3 — 2022-07-01
- 0.0.2 — 2022-06-30
- 0.0.1 — 2022-06-30

## README

# react-polygon-image-cropper

## Demo

https://user-images.githubusercontent.com/53790951/176822796-6f5d6611-3a4a-4fed-9e8b-b6b6c9e1fedb.mp4

## Installation

```
npm install react-polygon-image-cropper
```

## Quickstart - Demo setup

```typescript
import React, { useRef, useState } from "react";
// import the Canvas component
import { Canvas } from "react-polygon-image-cropper";
// *important* import the styles for the component
import "react-polygon-image-cropper/dist/style.css";

function App() {
  const [url, setUrl] = useState("");
  const [source, setSource] = useState<any>("");
  const buttonRef = useRef(null);
  const resetRef = useRef(null);
  const rescaleRef = useRef(null);
  const saveRef = useRef(null);
  const saveCallback = (imageUrl: any) => setUrl(imageUrl);

  const handleImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    const reader = new FileReader();
    reader.onload = function (event) {
      if (event.target) setSource(event.target.result);
    };
    if (e.target.files) reader.readAsDataURL(e.target.files[0]);
  };

  return (
    <div className="App">
      <Canvas
        width={500}
        height={500}
        source={source}
        radius={30}
        color="red"
        cropEvent={{ elementRef: buttonRef, eventType: "click" }}
        rescaleEvent={{ elementRef: rescaleRef, eventType: "click" }}
        resetEvent={{ elementRef: resetRef, eventType: "click" }}
        saveProps={{ saveRef, saveCallback }}
        styles={{
          border: "1px solid red",
          display: "flex",
          alignItems: "center",
        }}
      />
      <input type="file" accept="image/png" onChange={(e) => handleImage(e)} />
      <button ref={buttonRef}>Crop</button>
      <button ref={rescaleRef}>Rescale</button>
      <button ref={resetRef}>Reset</button>
      <button ref={saveRef}>Save</button>
      <img src={url} />
    </div>
  );
}
```
## Documentation

### Canvas Props Table

|      Prop      |                                                                              Type                                                                              | Required | Description                                                                                                                                        |
|:--------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------:|----------------------------------------------------------------------------------------------------------------------------------------------------|
|      width     |                                                                             number                                                                             |   true   | Width of the image canvas                                                                                                                          |
|     height     |                                                                             number                                                                             |   true   | Height of the image canvas                                                                                                                         |
|     source     |                                                                             string                                                                             |   true   | Source string for the image. Can be a URL or local image (e.g. in assets)                                                                          |
|     radius     |                                                                             number                                                                             |   true   | Radius of the handles                                                                                                                              |
|      color     |                                                                             string                                                                             |   true   | Fill color of the handles                                                                                                                          |
|    cropEvent   |  [EventListenerProps](https://github.com/bbawj/react-polygon-image-cropper/blob/144f67d42e8de666ab49fd0b65d874536ef5434e/src/components/Canvas/Canvas.tsx#L18) |   false  | Used to attach a HTMLEvent to a React.RefObject in order to trigger a crop function                                                                |
|   resetEvent   |  [EventListenerProps](https://github.com/bbawj/react-polygon-image-cropper/blob/144f67d42e8de666ab49fd0b65d874536ef5434e/src/components/Canvas/Canvas.tsx#L18) |   false  | Used to attach a HTMLEvent to a React.RefObject in order to trigger a reset function                                                               |
|  rescaleEvent  |  [EventListenerProps](https://github.com/bbawj/react-polygon-image-cropper/blob/144f67d42e8de666ab49fd0b65d874536ef5434e/src/components/Canvas/Canvas.tsx#L18) |   false  | Used to attach a HTMLEvent to a React.RefObject in order to trigger a rescale function                                                             |
|    saveProps   |      [SaveProps](https://github.com/bbawj/react-polygon-image-cropper/blob/144f67d42e8de666ab49fd0b65d874536ef5434e/src/components/Canvas/Canvas.tsx#L23)      |   false  | Used to attach a HTMLEvent to a React.RefObject in order to trigger a save callback which passes the data url of the final canvas (after rescale). |
|     styles     |                                                                       React.CSSProperties                                                                      |   false  | Used to style the bounding <div> box for the canvases                                                                                              |
| customCallback | [CustomCallbackProps](https://github.com/bbawj/react-polygon-image-cropper/blob/144f67d42e8de666ab49fd0b65d874536ef5434e/src/components/Canvas/Canvas.tsx#L12) |   false  | Passes the React.RefObject for all 3 canvases to be used in custom logic                                                                           |

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