React Photo Editor

A photo editor that allows you to adjust :

• Brightness
• Contrast
• Saturation
• Grayscale
• Sepia
• Hue Rotate
• Blur Effect to a photo.

Demo & Features

This Photo Editor is equipped with some features that you can apply on an image.

Here are the features :

Brightness

This is how this Photo Editor looks by default :

You can decrease brightness :

On the other hand, increasing brightness is possible as well :

Contrast

Default look :

You can adjust as you want :

On the contrary, this app allows you to add contrast :

Saturation

This is how an image looks normally :

You are allowed to reduce saturation of an image :

Adding saturation is now possible using this Photo Editor :

Grayscale

Before adding grayscale effect :

Love a classic image? Rising graysale might be the effect that you would love :

Sepia

Without Sepia effect :

Escalating sepia to see the effect that you might be interested :

Hue Rotate

Have not ever heard of Hue Rotate effect? Well, this is a normal image :

Adding Hue Rotate effect :

Blur

This might the effect that you are most familiar with. Well here is the default look :

Adding blur effect to make an image look classy :

How to Run :

In the project directory, you can :

1. Install dependencies :

yarn

2. Run Photo Editor on your browser :

yarn start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Reference

• How To Build A Photo Editor With React And CSS Filters - Web Dev Simplified