@halka/zoomable-image

A react component to have zoomable images like medium built with framer-motion.

!! CAUTINARY NOTE: This was more or less an experiment and can will have edge cases and bugs. Also the bundle size is pretty obnoxiously large due to dependencies like framer-motion. Use with CAUTION! If you find any issues please raise them. Thanks!

Good alternative - medium-zoom We have a light but powerful React wrapper on top of the amazing medium-zoom library - @halka/react-medium-zoom

Installation

npm i @halka/zoomable-image

Usage

import { ZoomableImage } from '@halka/zoomable-image';

function App() {
  return (
    <>
      <OtherComponents >
      <ZoomableImage
        src={imgUrl}
        alt="mosque "
        style={{ width: 'auto', height: 400 }}
        /** only custom prop **/
        zoomedPadding={20}
      />
      <OtherComponents >
    </>
  );
}

You can pass all valid HTMLImgElement props i.e. anything you can pass to <img>.

One additional props is zoomPadding which is a numeric padding value in px units that will be used as padding for the zoomed image.