# react-bootstrap-image-cropper

> Select, crop, preview, edit, all in one!

Latest version **0.3.0** (published 2019-10-21) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2019-10-21 |
| First published | 2019-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 46 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhaoyao91 |
| Maintainers | zhaoyao91 |
| Keywords | react-bootstrap, image cropper |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap-image-cropper
- Repository: https://github.com/zhaoyao91/react-bootstrap-image-cropper
- Homepage: https://zhaoyao91.github.io/react-bootstrap-image-cropper
- Issues: https://github.com/zhaoyao91/react-bootstrap-image-cropper/issues
- npm.io page: https://npm.io/package/react-bootstrap-image-cropper

## Dependencies (2)

- [use-object-url](https://npm.io/package/use-object-url.md) ^1.0.0
- [react-easy-crop](https://npm.io/package/react-easy-crop.md) ^1.16.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2019-10-21
- 0.2.4 — 2019-09-24
- 0.2.3 — 2019-09-24
- 0.2.2 — 2019-09-21
- 0.2.1 — 2019-09-21
- 0.2.0 — 2019-09-21
- 0.1.0 — 2019-09-21
- 0.0.0-dev.3 — 2019-09-21
- 0.0.0-dev.2 — 2019-09-21
- 0.0.0-dev.1 — 2019-09-21
- 0.0.0-dev.0 — 2019-09-21

## README

# React Bootstrap Image Cropper

Select, crop, preview, edit, all in one!

## Introduction

Based on [react-bootstrap modal](https://react-bootstrap.github.io/components/modal/) and [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop),
this package provides an all-in-one component which handles all of image selecting, cropping, previewing and editing.

All the rest left for you is to get the final file and upload it to your server.

## Demo & Example

[Demo](https://zhaoyao91.github.io/react-bootstrap-image-cropper/)

[Example](./example/src/App.js)

![demo](https://user-images.githubusercontent.com/3808838/65366436-64537500-dc56-11e9-8754-f4566e90ebdc.gif)

## Installation

```bash
npm i react-bootstrap-image-cropper
```

You also need the depended packages:

```bash
npm i react react-bootstrap
```

## API

Options with `*` prefix are recommended to set.

### Common Options

- `inputOptions` ? : object
  - \* `maxWidth` = Infinity
  - \* `maxHeight` = Infinity
  - `mimeType` = 'image/jpeg'
  - `quality` ? : number
- `cropOptions` ? : object
  - \* `aspect` ? : number
  - `maxZoom` ? : number
- `outputOptions` ? : object
  - \* `maxWidth` = Infinity
  - \* `maxHeight` = Infinity
  - `mimeType` = 'image/jpeg'
  - `quality` ? : number
- `displayOptions` ? : object
  - `title` = 'Crop Image',
  - `removeButtonText` = 'Remove'
  - `confirmButtonText` = 'Confirm'

### ImageCropper specific Options

- \* `fileRef` ? : ref // ref for cropped file
- `onChange` ? : (croppedFile) => void
- `previewOptions` ? : object
  - \* `width` : number
  - \* `height` : number
  - `children` = 'Select Image'

### HiddenCropper specific Options

- \* `triggerRef` : ref // use `ref.current.trigger()` to trigger hidden input
- \* `onCropped` : (croppedFile) => void

### License

MIT

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