Home

Awesome

<p align="center"> <img alt="Github Checks" src="https://badgen.net/github/checks/willnguyen1312/zoom-image/main"/> <img alt="Github Stars" src="https://badgen.net/github/stars/willnguyen1312/zoom-image" /> </p> <br />

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.

Development

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

Commands

Please change all versions from "latest" to "workspace*" inside the example project you want to start, run pnpm install before executing one of the commands below. I wanted to keep those packages for Stackblitz usage so I use "latest", unfortunately pnpm doesn't understand it during local development 🙈

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

Sponsor

<a href="https://www.buymeacoffee.com/namnguyenle" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

License

MIT © Nam Nguyen