![react-photo-editor](https://github.com/musama619/react-photo-editor/blob/main/react-photo-editor.png)
react-photo-editor
React component for image editing with options to set brightness, contrast, saturation, and grayscale. Also with features to rotate, flip and zoom the photo.
Installation
npm
npm install react-photo-editor
yarn
yarn add react-photo-editor
Basic Usage
import { ReactPhotoEditor } from 'react-photo-editor'
import 'react-photo-editor/dist/style.css'
function App() {
const [file, setFile] = useState<File | undefined>()
const [showModal, setShowModal] = useState(false)
const showModalHandler = () => {
if (file) {
setShowModal(true)
}
}
const hideModal = () => {
setShowModal(false)
}
const handleSaveImage = (editedFile: File) => {
setFile(editedFile);
};
const setFileData = (e: React.ChangeEvent<HTMLInputElement> | null) => {
if (e?.target?.files && e.target.files.length > 0) {
setFile(e.target.files[0])
}
}
return (
<>
<input
type="file"
onChange={(e) => setFileData(e)}
multiple={false}
/>
<button onClick={showModalHandler}>Edit</button>
<ReactPhotoEditor
open={showModal}
onClose={hideModal}
file={file}
onSaveImage={handleSaveImage}
/>
</>
)
}
export default App
Usage with Tailwind CSS
If your project uses Tailwind CSS, you don’t need to import the CSS file directly. Instead, add the following path to the content array in your tailwind.config.js file:
module.exports = {
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./node_modules/react-photo-editor/dist/*.js',
],
theme: {
extend: {},
},
plugins: [],
}
Options
export interface ReactPhotoEditorProps {
file: File | undefined,
allowColorEditing?: boolean,
allowRotate?: boolean,
allowFlip?: boolean,
allowZoom?: boolean,
downloadOnSave?: boolean,
open?: boolean,
onClose?: () => void,
onSaveImage: (image: File) => void,
}
Contributing
Contributions to react-photo-editor
are welcome! If you have any issues, feature requests, or improvements, please open an issue or submit a pull request on the GitHub repository. Your feedback and support are highly appreciated!
Reporting Issues
If you encounter any problems while using the library, please open an issue on GitHub. Provide as much detail as possible, including steps to reproduce the issue and any relevant code or screenshots.
Feature Requests
Have an idea for a new feature? Please open an issue with a detailed description of the feature you'd like to see, and why it would be useful.
Thank you for your interest in contributing to react-photo-editor
!