React image resizer

Widget for resizing and rotating local images. Select an image from your local disk, and start editing. When you are done, click on Resize button and the image will call our API that will resize the image and provide a download link.

The widget can be customized in the following way.

• className prop - where you can edit the styles how you want it to look.
• Each button has their own style object
• Button texts can be changed
• Height/width labels can be changed
• Button texts can be changed
• Rotate feature can be turned off
• Clear form capability can be turned off

All props

All props are optional

interface IReactResizer {
  className?: any;
  label?: string;
  uploadBtnText?: string;
  selectBtnText?: string;
  heightText?: string;
  widthText?: string;
  downloadText?: string;
  selectButtonStyle?: any;
  resizeButtonStyle?: any;
  downloadButtonStyle?: any;
  rotateEnabled?: boolean;
  clearEnabled?: boolean;
}

No image selected

Default design of widget before any file is selected

Image selected

An image is selected and ready to be edited

Image resized and ready to be downloaded

When image is processed, a Download button will appear that can download the new image.

Download

npm i reactjs-image-resizer

Usage

Default design

import { ReactResizer } from "reactjs-image-resizer";

<ReactResizer />;

Change texts

All our optional, but still configurable if wanted. E.g for translation reasons etc.

import { ReactResizer } from "reactjs-image-resizer";

<ReactResizer
  label="Example widget"
  downloadText="Download image"
  selectBtnText="Select img"
  uploadBtnText="Upload"
  heightText="Height text"
  widthText="Width text"
/>;

Custom styles for buttons

Example of styling of buttons with their respective style object

import { ReactResizer } from "reactjs-image-resizer";

<ReactResizer
  downloadButtonStyle={{ backgroundColor: "cyan", color: "black" }}
  resizeButtonStyle={{ backgroundColor: "wheat", color: "black" }}
  selectButtonStyle={{ backgroundColor: "beige", color: "black" }}
/>;

Rotation and clear form disabled

Example of rotation and clear form capablities turned off

import { ReactResizer } from "reactjs-image-resizer";

<ReactResizer clearEnabled={false} rotateEnabled={false} />;

Custom styles with className

Examle with className provided

import { ReactResizer } from "reactjs-image-resizer";

<ReactResizer label="Example widget" className={styles.resizer} />;

.resizer {
  background-color: #c5fff3 !important;
  max-width: 500px;

  // Mobile
  @media only screen and (max-width: 600px) {
    max-width: 85%;
  }

  label {
    background-color: black;
  }

  button {
    background-color: #fa3232;
  }
}

Result

Some notes

The widget are using our own API in the background when it is doing the resizing and rotation. If you think something can be improved or if you are missing some functionality, please give us an email and we will (most probably) fix it for you.

Feedback

If any feedback, bug findings or feature requests - just email us with whatever you feel is missing or can be improved. Contact info is found here.