Socket
Socket
Sign inDemoInstall

react-photo-editor

Package Overview
Dependencies
5
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-photo-editor

React component for image editing with filters, rotate, zoom and more.


Version published
Weekly downloads
571
decreased by-8.79%
Maintainers
1
Install size
72.3 kB
Created
Weekly downloads
 

Readme

Source

react-photo-editor

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 install react-files-preview

Stackblitz - Check It Live

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)

   // Show modal if file is selected
  const showModalHandler = () => {
    if (file) {
      setShowModal(true)
    }
  }

  // Hide modal
  const hideModal = () => {
    setShowModal(false)
  }

  // Save edited image
  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

Options

export  interface  ReactPhotoEditorProps {

    /**
    * The input image file to be edited.
    */
    file:  File  |  undefined,

    /**
    * Whether to allow color editing options.
    * @default  true
    */
    allowColorEditing?:  boolean,
    
    /**
    * Whether to allow rotation of the image.
    * @default  true
    */
    allowRotate?:  boolean,
    
    /**
    * Whether to allow flipping (horizontal/vertical) of the image.
    * @default  true
    */
    allowFlip?:  boolean,
    
    /**
    * Whether to allow zooming of the image.
    * @default  true
    */
    allowZoom?:  boolean,
    
    /**
    * Whether to enable the option to download the edited image upon saving.
    * @default  false
    */
    downloadOnSave?:  boolean,
    
    /**
    * Whether the photo editor modal is open.
    * @default  false
    */
    open?:  boolean,
    
    /**
    * Function invoked when the photo editor modal is closed.
    */
    onClose?: () =>  void,
    
    /**
    * Function invoked when the edited image is saved.
    * @param  image - The edited image file.
    */
    onSaveImage: (image:  File) =>  void,
 }

Keywords

FAQs

Last updated on 13 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc