Zoom in and out on image in React.js

Question

I am using react-image-gallery to view images on a page. And now I need to implement a zoom-in and zoom-out feature on button click. I have given a thorough read to the documentation of react-image-gallery but I couldn't find anything helpful. There is a prop named renderCustomControls that I have used to display zoom functionality buttons at the top left corner as shown here:

But I have no idea how to make that work. Any kind of help will be appreciated. Here is some relevant code:

export class CVPreview extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: []
    }

    this.renderCustomControls = this.renderCustomControls.bind(this)
  }

  renderCustomControls() {
    return(
      <span>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentAdd />
        </FloatingActionButton>
        <FloatingActionButton mini={true} secondary={true}>
          <ContentRemove />
        </FloatingActionButton>
      </span>
    )
  }

  render() {
    const { openCVPreviewModal, onRequestClose } = this.props

    return (
      <Dialog
        className="cv-preview"
        titleClassName="cv-preview-title"
        contentClassName="cv-preview-content"
        bodyClassName="cv-preview-body"
        modal={false}
        open={openCVPreviewModal}
        autoDetectWindowHeight={false}
        onRequestClose={onRequestClose}>
        <IconButton
          className='close-icon'
          onClick={onRequestClose}>
          <ClearIcon />
        </IconButton>
        {
          this.state.images.length > 0 &&
          <ImageGallery
            items={this.state.images}
            renderItem={this.renderItem}
            renderLeftNav={this.renderLeftNav}
            renderRightNav={this.renderRightNav}
            showThumbnails={false}
            showPlayButton={false}
            showBullets={true}
            showFullscreenButton={false}
            renderCustomControls={this.renderCustomControls}/>
        }
        {
          this.state.images.length === 0 &&
          <p className="no-images-msg">
            No preview images found.
          </p>
        }
      </Dialog>
    )
  }
}

Answer 1

Looks like there is no zooming ability in the component itself. You will probably have to fiddle with the actual image object itself (scaling the image and reloading). Either that, or you will have to look for another more suitable component.

There are a number of react components available solely for zooming purposes. You could maybe make use of one such component along side react-image-gallery