Don't Worry

about your user's photo. This

React Image Editor

will give you exactly what user wants

and your web application needs

Developed as open source software

Always open to contributions

Image Crop

Square Image

Thanks to react-image-crop

Adjust Image Colors

Image Optimization

Apply Image Filters

Thanks to Pixels.js

Custom Style Support

Multi Language Support

Playground

Themes
Default
Dark
You can aslo create your own themes and even suggest them to make this list of themes even bigger
Learn more here
Language
English(EN)
Español(ES)
Japanese(JA)
Chinese(ZH)
Francais(FR)
Italiano(IT)
हिंदू(HIN)
You can also suggest corrections for language packs or suggest more
Learn more here

Get Started

Installation

In your terminal, execute this command depending on your preferred package manager:

npm i react-profile
yarn add react-profile
pnpm add react-profile

Example

One way to open the editor is passing the image path and rendering it. For example:

import React from "react";
import ReactProfile from "react-profile";
import "react-profile/themes/default.min.css";

function App() {
  return <ReactProfile src="./your-image.png" />;
}

export default App;

Additionally, you can open the editor directly in your code. For example:

import { openEditor } from "react-profile";
import "react-profile/themes/dark.min.css";

async function open() {
  const result = await openEditor({ src: "./your-image.jpg" });
}

Very important: Always import the corresponding style file for the desired theme when rendering/calling the editor.

ContactDocsGithubLicense

React Profile Editor