Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/willnguyen1312/zoom-image
A little yet powerful framework agnostic headless library to zoom images on the web
https://github.com/willnguyen1312/zoom-image
frameworks headless nextjs preact qwik react remix solidjs svelte vanilla-js vue zoom
Last synced: about 1 month ago
JSON representation
A little yet powerful framework agnostic headless library to zoom images on the web
- Host: GitHub
- URL: https://github.com/willnguyen1312/zoom-image
- Owner: willnguyen1312
- License: mit
- Created: 2023-04-29T14:15:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-12T15:45:44.000Z (4 months ago)
- Last Synced: 2024-05-21T13:53:08.009Z (4 months 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: 38.4 MB
- Stars: 278
- Watchers: 1
- Forks: 8
- 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-react-components - zoom-image - [demo](https://willnguyen1312.github.io/zoom-image/examples/react.html) - [docs](https://willnguyen1312.github.io/zoom-image) - A little yet powerful framework agnostic library to zoom image on the web (UI Components / Photo / Image)
- fucking-awesome-react-components - zoom-image - 🌎 [demo](willnguyen1312.github.io/zoom-image/examples/react.html) - 🌎 [docs](willnguyen1312.github.io/zoom-image) - A little yet powerful framework agnostic library to zoom image on the web (UI Components / Photo / Image)
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)