@halka/zoomable-image
v0.1.2
Published
A react component to have zoomable images like medium built with framer-motion.
Downloads
28
Readme
@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 amazingmedium-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.