Announcing react-medium-image-zoom v4
Info
Summary | react-medium-image-zoom is an open source image zooming library based on medium.com's implementation of image zooming |
---|---|
Shared | 2020-01-19 |
Revised | 2023-02-12 @ 00:00 UTC |
2023-02-12 update: this article’s content is valid for the v4, but it isn’t really for the v5 version.
tl;dr => I’ve release v4 of react-medium-image-zoom, and you should consider using it for zooming images. Check out the Storybook Examples to see it in action.
History of react-medium-image-zoom
I wrote the first version of react-medium-image-zoom
in 2016 in a 6m x 6m flat in London that my (now) wife and I lived in. At the time, I had been enamored with medium.com’s image zooming and wanted to share that with the React.js masses, so I wrote the first implementation on nights and weekends, and once it published, it was quickly added to projects at my day job.
People Use It?!
Since then, react-medium-image-zoom
has 22 All Contributors, has reached up to 50k downloads per month, is used by 638 open source projects on GitHub, has 49 dependent packages on NPM, and has over 708 stars on GitHub. While that might not be staggering to anyone, that means the world to me – somebody else found value in something I made and put out into the world for free!
Why v4 Was Needed
Over the past 3.5 years, a number of issues were opened to ask for bug fixes, features and general questions, and there have even been a few pull requests, too! I am so grateful for all the effort put in by others to help me help them solve their issues.
A point was eventually reached, however, where there were bugs that were unfixable with the implementation of the component, and the codebase was not something I wanted to work with any more.
I knew it could be simpler! I knew it could be more accessible!
Using react-medium-image-zoom
v4
Here is what using react-medium-image-zoom
looks like now.
First, you import the default, uncontrolled component and the static CSS file:
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'
And then you go about your day adding zooming capabilities to your images:
<Zoom>
<img
alt="that wanaka tree"
src="/path/to/thatwanakatree.jpg"
width="500"
/>
</Zoom>
Did I mention that you can now zoom anything you like?
// <picture>
<Zoom>
<picture>
<source
media="(max-width: 800px)"
srcSet="/path/to/teAraiPoint.jpg"
/>
<img
alt="that wanaka tree"
src="/path/to/thatwanakatree.jpg"
width="500"
/>
</picture>
</Zoom>
// <figure>
<figure>
<Zoom>
<img
alt="that wanaka tree"
src="/path/to/thatwanakatree.jpg"
width="500"
/>
</Zoom>
<figcaption>That Wanaka Tree</figcaption>
</figure>
// <div> that looks like a circle
<Zoom>
<div
aria-label="A blue circle"
style={{
width: 300,
height: 300,
borderRadius: '50%',
backgroundColor: '#0099ff'
}}
/>
</Zoom>
If you find that you want to use the library as a controlled component, you import the Controlled
component like this:
import { Controlled as Zoom } from 'react-medium-image-zoom'
And then you dictate whether or not it should be zoomed and provide a callback for the library to give you hints about when you should probably zoom or unzoom based on events like clicks and scrolling:
<Zoom
isZoomed={true}
onZoomChange={isZoomed => { console.log({ isZoomed }) }}
>
<img
alt="that wanaka tree"
src="/path/to/thatwanakatree.jpg"
width="500"
/>
</Zoom>
What’s Next For react-medium-image-zoom
?
- Smarter detection for image
naturalWidth
andnaturalHeight
so we don’t try to zoom anything when it’s already at its maximum dimensions. This would also re-enable the ability to not zoom beyond a source image’s natural dimensions once zoomed. - Performance improvements (
requestAnimationFrame
, etc.) - Explore re-enabling switching out lower-quality images with higher-quality ones as part of the zoom process
Thank You
Thank you for reading this and for having an interest in react-medium-image-zoom
! If you’d like to contribute to the project, need help, or have constructive feedback, please open an issue on the react-medium-image-zoom
issue tracker.
Thank you for reading!
Robert