# js-img-magnify

> Pure JavaScript utility enabling magnifying glass effect on an images

Latest version **0.0.8** (published 2023-10-16) · 0 weekly downloads

## Install

```sh
npm install js-img-magnify
pnpm add js-img-magnify
yarn add js-img-magnify
bun add js-img-magnify
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2023-10-16 |
| First published | 2023-10-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | shengbuchao |
| Maintainers | shengchao |
| Keywords | magnify, img, utility, Typescript, No-external |

## Links

- npm: https://www.npmjs.com/package/js-img-magnify
- Repository: https://github.com/s749312025/js-img-magnify
- npm.io page: https://npm.io/package/js-img-magnify

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2023-10-16
- 0.0.7 — 2023-10-11
- 0.0.6 — 2023-10-11
- 0.0.5 — 2023-10-11
- 0.0.4 — 2023-10-11
- 0.0.3 — 2023-10-11
- 0.0.2 — 2023-10-11
- 0.0.1 — 2023-10-10

## README

# js-img-magnify

![npm](https://img.shields.io/npm/v/js-img-magnify)  ![npm bundle size](https://img.shields.io/bundlephobia/minzip/js-img-magnify) ![npm](https://img.shields.io/npm/dw/js-img-magnify)

Pure JavaScript utility enabling magnifying glass effect on an images.
No external dependencies required.

So you can use it in any web application, such as `Vue`, `React`,`Angular`, `Svelte`, or any other application.

support `Typescript`

## Demo

[view Demo](https://s749312025.github.io/js-img-magnify/)

## How to use

- npm or yarn
  
  - install
    ```bash
    npm i js-img-magnify
    # or
    yarn js-img-magnify
    ```
  - use
    ```js
    import magnifyImg from 'js-img-magnify';
    import img from './assets/waterDrop.jpg';
    magnifyImg({
        src: img,   // or img url
        zoom: 3,
        target: document.getElementById('example'),
        width: 500, // img width, Can also '50%'
        MagnifyDomStyles: {"borderRadius":"50%","border":"4px solid red"},
        MagnifyDom: document.getElementById('show'),
        ...
    })
    ```
- cdn
  
  - install
    ```html
    <script src="https://cdn.jsdelivr.net/npm/js-img-magnify@latest/lib/js-img-magnify.umd.js"></script>
    ```
  - use
    ```js
    magnifyImg({
        src: imgURL,
        zoom: 3,
        target: document.getElementById('example'),
        width: 500, // img width, Can also '50%'
        MagnifyDom: document.getElementById('show'),
        ...
    })
    ```

## Props

| propName | type | required |desc | default |
| --- | --- | --- |--- |--- |
| src | string | true | img tag src prop | |
| zoom | number | false| magnification times | 3 |
|target | HTMLElement| true | target HTMLElement ||
|width | string/number | false | imgTag width，`100` or `"50%"` | "auto" |
|MagnifyDomWidth| number| false| js created magnifying glass dom, if `MagnifyDom` has value, This will not work. | 200|
|MagnifyDomStyles|partialCSSStyleDeclaration|false|it will merge js created magnifying glass dom styles, if `MagnifyDom` has value, This will not work | {} |
|MagnifyDom| HTMLElement| false | user custom magnify Dom |
|overflow | Boolean | false | Whether or not to allow exceeding the image range at the image edges | true |

---
_Source: https://npm.io/package/js-img-magnify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._