Apologies if you were hoping for a font related post but I just released my first open source React component on NPM so I’m pretty excited about that right now.

Maybe it’s because I’ve done a lot of e-commerce work but it feels like I’ve had to implement the same product image zoom in multiple occasions. This jQuery Zoom plugin sufficed for a while but it usually required some retooling for mobile devices and didn’t feel right in an otherwise React environment. Not to mention the issues that cropped up when the designs called for image zooming inside a carousel (which was surprisingly often). So I tried to take that zoom and pan functionality and move it over into a React component that works nicely with other React modules. 

React Inner Image Zoom includes:

• Default zoom on click + pan on hover behavior
• Zoom on click + drag on move on touch devices
• Support for responsive images
• Optional fullscreen zooming at smaller breakpoints on touch devices
• Out of the box integration with other React components like react-lazyload and react-slick

I have a demo page up here and the Github repo has more details on how to use it. Figuring out the build process for open-sourcing a React component one of the trickier parts so let me know if there are any installation problems (or problems of any kind really).