@syedabbas/react-image-editor-library

EditImageModal

A React component for editing images with cropping, drawing, and text features. This modal allows users to upload an image, apply edits, and save the edited image.

Installation

npm install @syedabbas/react-image-editor-library

Usage

import EditImageModal from '@syedabbas/react-image-editor-library'

const YourComponent = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [imageSrc, setImageSrc] = useState(null)

  const handleSave = (file) => {
    // Handle the saved file
  }

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Edit Image</button>
      <EditImageModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        imageSrc={imageSrc}
        onSave={handleSave}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	false	Controls the visibility of the modal.
onClose	function	-	Callback function called when the modal is closed.
imageSrc	string	-	Source of the image to be edited.
onSave	function	-	Callback function called with the edited image file when the user saves.
index	number	0	Index of the image in a collection (if applicable).
modalStyle	object	{}	Custom styles for the modal.
canvasStyle	object	{}	Custom styles for the canvas.
sliderStyle	object	{}	Custom styles for the sliders used for pen, highlighter, and eraser sizes.
buttonStyle	object	{}	Custom styles for the Done button.
initialPenColor	string	#000000	Initial color for the pen tool.
initialHighlighterColor	string	rgba(255, 255, 0, 0.5)	Initial color for the highlighter tool.
initialPenSize	number	2	Initial size for the pen tool.
initialHighlighterSize	number	20	Initial size for the highlighter tool.
initialEraserSize	number	20	Initial size for the eraser tool.
fixedBoxSize	number	500	Fixed size for the box containing the image and canvas.

Features

• Cropping: Users can crop images with adjustable aspect ratio.
• Drawing: Users can draw on the image using a pen, highlighter, or eraser.
• Text Adding: Users can click on the image to add text annotations.
• Undo/Redo: Users can undo or redo their actions.
• Color Selection: Users can choose colors for the pen and highlighter.
• Image Saving: Users can save the edited image as a PNG file.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or features you'd like to discuss.