Don't Worry
about your user's photo. This
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
Get Started
In your terminal, execute this command depending on your preferred package manager:
npm i react-profile
yarn add react-profile
pnpm add react-profile
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.