How to resize and rotate images in React

I think most of us have been in some situation where we needed to resize an image. I can think of many situations where I found myself in that place at least. Some websites require a certain width/height and some images are simply just to big etc. Then there are all these cool tools online we can use to fix our issue. However, maybe you have an application or website that requires your own solution for this, and you might not have the time to implement it yourself - then I really hope this guide could be something for you!

In this article, I will show how we can use an amazing open source library called reactjs-image-resizer to resize and rotate an image in React.

Spoiler alert: It is an Algobook open source project that we will promote in this post. Full docs can be found here.

Download

In your terminal, download the library

npm i reactjs-image-resizer

Imlementation

Then in our imlementation, we can use it right away like this

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

<ReactResizer />;

Default looking widget

As default, it will look like this

Text changes

And, this amazing library allows us to do text changes as well, if we are not satisfied with the default ones

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

<ReactResizer
  label="My cool image editor"
  selectBtnText="Choose"
  uploadBtnText="Fix image"
  downloadText="Get it!"
/>;

Widget with custom texts

And now it will look like this

Custom styling

If you think this is all cool and everything, but you still are not convinced since you website looks totally different than this widget - hold my beer.

import { ReactResizer } from "reactjs-image-resizer";
import style from "./MyStyles.module.scss";

<ReactResizer className={style.resizer} />;

And our style

.resizer {
  width: 500px;
  background-color: pink !important;
  transform: rotate(10deg);

  h3 {
    color: black !important;
    font-weight: bold;
    font-style: italic;
  }
}

Result of custom styling

All right, so maybe not the best way to go. But hey, I just wanted to show that a lot is possible when it comes to styling it so it can suite your application.

Outro

I will end this post here, and I hope you think this free open source project is something that you can use in your application. Because, that is the main goal we are thriving for here, we want to help as many people as possible with our software and we will continue to do so.

To check out the full doc, click here.

All the best,