Nanotechnology Promises Much

    @halka/zoomable-image
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    @halka/zoomable-image

    Bundle Size npm version types license

    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.

    Install

    npm i @halka/zoomable-image

    DownloadsWeekly Downloads

    11

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    61.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • drenther
    • pepsighan