Zoom-Image: A React Component for Zooming Images on Hover

Zoom Image

A little yet powerful framework agnostic headless library to zoom images on the web. It is a typical experience on e-commerce sites. Examples are written with Preact, React, Svelte, Vanilla JS and Vue.

  • ✅ Zoom on wheel (scroll & pinch)
  • ✅ Zoom on hover
  • ✅ Zoom on move
  • ✅ Zoom on click

Development

git clone https://github.com/willnguyen1312/zoom-image
cd zoom-image
pnpm install
pnpm build

Commands

With Docs

pnpm start-docs

With Preact

pnpm start-preact

With React

pnpm start-react

With Remix

pnpm start-remix

With Next

pnpm start-next

With Svelte

pnpm start-svelte

With Vanilla JS

pnpm start-vanilla

With Vue

pnpm start-vue

With Solid

pnpm start-solid

With Qwik

pnpm start-qwik

Relevant projects

  • react-zoomable-media - The library I wrote for my previous company
  • zagjs - The project's architecture is inspired by this library
  • TanStack - The project's core pattern is heavily inspired by this project - Headless UI
  • js-image-zoom - The internal working of zoom image on hover is inspired by this library

Download details:

Author: willnguyen1312
Source: https://github.com/willnguyen1312/zoom-image

License: MIT license

#react 

Zoom-Image: A React Component for Zooming Images on Hover
2.00 GEEK