Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://willnguyen1312.github.io/zoom-image/
A little yet powerful framework agnostic headless library to zoom images on the web
https://willnguyen1312.github.io/zoom-image/
frameworks headless nextjs preact qwik react remix solidjs svelte vanilla-js vue zoom
Last synced: 3 days ago
JSON representation
A little yet powerful framework agnostic headless library to zoom images on the web
- Host: GitHub
- URL: https://willnguyen1312.github.io/zoom-image/
- Owner: willnguyen1312
- License: mit
- Created: 2023-04-29T14:15:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-27T23:09:19.000Z (9 days ago)
- Last Synced: 2024-10-29T15:23:36.587Z (7 days ago)
- Topics: frameworks, headless, nextjs, preact, qwik, react, remix, solidjs, svelte, vanilla-js, vue, zoom
- Language: TypeScript
- Homepage: https://willnguyen1312.github.io/zoom-image/
- Size: 39.1 MB
- Stars: 306
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-solid-js - Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web (📦 Components & Libraries / UI Components)
README
- [Zoom Image](#zoom-image)
- [Development](#development)
- [Commands](#commands)
- [With Docs](#with-docs)
- [With Preact](#with-preact)
- [With React](#with-react)
- [With Remix](#with-remix)
- [With Next](#with-next)
- [With Svelte](#with-svelte)
- [With Vanilla JS](#with-vanilla-js)
- [With Vue](#with-vue)
- [With Solid](#with-solid)
- [With Qwik](#with-qwik)
- [Relevant projects](#relevant-projects)
- [Sponsor](#sponsor)
- [License](#license)
## 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
```bash
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
```bash
pnpm start-docs
```
### With Preact
```bash
pnpm start-preact
```
### With React
```bash
pnpm start-react
```
### With Remix
```bash
pnpm start-remix
```
### With Next
```bash
pnpm start-next
```
### With Svelte
```bash
pnpm start-svelte
```
### With Vanilla JS
```bash
pnpm start-vanilla
```
### With Vue
```bash
pnpm start-vue
```
### With Solid
```bash
pnpm start-solid
```
### With Qwik
```bash
pnpm start-qwik
```
## Relevant projects
- [react-zoomable-media](https://github.com/willnguyen1312/react-zoomable-media) - The library I wrote for my previous
company
- [zagjs](https://github.com/chakra-ui/zag) - The project's architecture is inspired by this library
- [TanStack](https://tanstack.com) - The project's core headless pattern is heavily inspired by this project - Headless
UI
- [js-image-zoom](https://github.com/malaman/js-image-zoom) - The internal working of zoom image on hover is inspired by
this library
## Sponsor
## License
MIT © [Nam Nguyen](https://github.com/willnguyen1312)