npm install --save react-medium-image-zoom

import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'
export const MyImg = () => (
  <Zoom>
    <img
      alt="That Wanaka Tree, New Zealand by Laura Smetsers"
      src="/path/to/thatwanakatree.jpg"
      width="500"
    />
  </Zoom>
)

"export interface UncontrolledProps { // Accessible label text for when you want to unzoom. // Default: 'Minimize image' a11yNameButtonUnzoom?: string // Accessible label text for when you want to zoom. // Default: 'Expand image' a11yNameButtonZoom?: string // Allow swipe gesture to unzoom. // Default: true canSwipeToUnzoom?: boolean // Your image (required). children: ReactNode // Custom CSS className to add to the zoomed . classDialog?: string // Provide your own unzoom button icon. // Default: ICompress IconUnzoom?: ElementType // Provide your own zoom button icon. // Default: IEnlarge IconZoom?: ElementType // Disables the zoom/unzoom behavior. // Default: false isDisabled?: boolean // First argument: boolean value of a new zoomed state (Uncontrolled // component) or a suggested new state (Controlled component). // Second argument: object containing the event that triggered the change. // Default: undefined onZoomChange?: ( value: boolean, data: { event: React.SyntheticEvent | Event }, ) => void // Swipe gesture threshold after which to unzoom. // Default: 10 swipeToUnzoomThreshold?: number // Specify what type of element should be used for // internal component usage. This is useful if the // image is inside a

or