# docusaurus-plugin-image-zoom

> Docusaurus plugin to utilize https://www.npmjs.com/package/medium-zoom in your projects easily!

Latest version **3.0.1** (published 2025-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install docusaurus-plugin-image-zoom
pnpm add docusaurus-plugin-image-zoom
yarn add docusaurus-plugin-image-zoom
bun add docusaurus-plugin-image-zoom
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2025-02-07 |
| First published | 2021-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gabriel J. Csapo |
| Maintainers | scalvert, gabrielcsapo |

## Links

- npm: https://www.npmjs.com/package/docusaurus-plugin-image-zoom
- Repository: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom
- Homepage: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom#readme
- Issues: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/issues
- npm.io page: https://npm.io/package/docusaurus-plugin-image-zoom

## Dependencies (2)

- [medium-zoom](https://npm.io/package/medium-zoom.md) ^1.1.0
- [validate-peer-dependencies](https://npm.io/package/validate-peer-dependencies.md) ^2.2.0

## Recent versions

- 3.0.1 (latest) — 2025-02-07
- 3.0.0 — 2025-02-07
- 2.0.0 — 2024-02-01
- 1.0.1 — 2023-05-11
- 1.0.0 — 2023-04-27
- 0.1.4 — 2023-04-17
- 0.1.3 — 2023-04-16
- 0.1.2 — 2023-04-13
- 0.1.1 — 2022-05-22
- 0.1.0 — 2022-05-14
- 0.0.2 — 2021-09-29
- 0.0.1 — 2021-09-15
- 0.0.0 — 2021-09-07

## README

# docusaurus-plugin-image-zoom

> Docusaurus plugin to utilize [`medium-zoom`](https://www.npmjs.com/package/medium-zoom) in your projects easily!

## Install

```shell
npm install docusaurus-plugin-image-zoom
```

## Usage

Update `docusaurus.config.js` to enable the plugin and include its default configuration:

```js
  const config = {
    // ...other config
    
    plugins: [
      'docusaurus-plugin-image-zoom', // can also just be 'image-zoom'
      // ...other plugins
    ],
    
    themeConfig: {
      // ...other themeConfig
      
      zoom: {
        selector: '.markdown > img',
        background: {
          light: 'rgb(255, 255, 255)',
          dark: 'rgb(50, 50, 50)'
        },
        config: {
          // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
        }
      }
    },
  }
  
  module.exports = config;
```

## Configuration

This plugin allows you to configure the following options:

| Option        | Description                                                                                      | Default Value                                                                                         |
|---------------|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|
| `selector`    | (optional) The selector to use for the images to zoom.                                          | `.markdown img`                                                                                      |
| `background`  | (optional) The background color to use for the zoomed image.                                     | `{ light: 'rgb(255, 255, 255)', dark: 'rgb(50, 50, 50)' }`                                           |
| `config`      | (optional) The configuration object to pass to `medium-zoom`.                                   | `{}`                                                                                                 |

Example usage in `docusaurus.config.js`:

```js
  themeConfig: {
    zoom: {
      selector: '.markdown :not(em) > img',
      background: {
        light: 'rgb(255, 255, 255)',
        dark: 'rgb(50, 50, 50)'
      },
      config: {
        // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
      }
    }
  },
```

---
_Source: https://npm.io/package/docusaurus-plugin-image-zoom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._