# @blacklab/react-image-magnify 中文文档

规范地址：https://npmcn.com/package/%40blacklab/react-image-magnify/

版本：4\.1\.1
npm 元数据更新时间：2022-05-20T02:14:03.223Z
中文译文更新时间：2026-11-08T05:51:32.631Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blacklab/react-image-magnify
原文对照：https://npmcn.com/package/%40blacklab/react-image-magnify/?lang=original
项目主页：https://github.com/gooftroop/react-image-magnify
源码仓库：https://github.com/gooftroop/react-image-magnify

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：286 kB，139 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@popperjs/core ^2\.11\.4，@react-hook/resize-observer ^1\.2\.5，detect-it 4\.0\.1，react ^16\.8 \|\| ^17\.0\.0 \|\| ^18\.0，react-dom ^16\.8 \|\| ^17\.0\.0 \|\| ^18\.0，react-popper ^2\.2\.5
- 首次发布：2021-09-15T17:07:33.439Z
- 最新版本发布：2022-05-20T02:14:03.122Z
- 近 30 天下载量：6321（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）

## 中文简介

响应图像缩放组件

## 安装

```sh
npm install @blacklab/react-image-magnify
```

也可以使用：`pnpm add @blacklab/react-image-magnify`、`yarn add @blacklab/react-image-magnify`、`bun add @blacklab/react-image-magnify`

## README

  

![Magnifying glass](https://npmcn.com/package/%40blacklab/react-image-magnify/assets/search-magnifier-tool.svg)

### 反射图像放大

  

**反应后图像缩放组件用于触摸和鼠标.**

 [![CircleCI](https://circleci.com/gh/gooftroop/react-image-magnify/tree/master.svg?style=svg)](https://circleci.com/gh/gooftroop/react-image-magnify/tree/master)[![](https://api.codeclimate.com/v1/badges/4e91d32af87836dce581/maintainability) ](https://codeclimate.com/github/gooftroop/react-image-magnify/maintainability)[![](https://coveralls.io/repos/github/gooftroop/react-image-magnify/badge.svg?branch=master) ](https://coveralls.io/github/gooftroop/react-image-magnify?branch=master)[![](https://img.shields.io/npm/v/@blacklab/react-image-magnify.svg) ](https://www.npmjs.com/package/@blacklab/react-image-magnify)[![](https://img.shields.io/badge/license-MIT-blue.svg) ](https://opensource.org/licenses/MIT)[![](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://gooftroop.github.io/react-image-magnify)

  
  

## 安装

```sh
npm install @blacklab/react-image-magnify
```

## 文档

**[在此查看文件](https://gooftroop.github.io/react-image-magnify)**

[故事书](https://gooftroop.github.io/react-image-magnify)

[五一号](https://github.com/ethanselzer/react-image-magnify)

React Image Magnify 是提供

-   在原地并边并边扩展图像
-   正或负空间引导镜头选项
-   互动提示
-   可配置的扩展图像维度
-   可选扩展图像外部渲染
-   绕行并点击意图
-   长压手势
-   淡出过渡

## 示例用途

```typescript
import ReactImageMagnify from 'react-image-magnify';

<ReactImageMagnify
    imageProps={{
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    }}
    magnifiedImageProps={{
        src: watchImg1200,
        width: 1200,
        height: 1800
    }}
/>
```

## 变动

可以找到特定版本的详细发行注释 [在我们的发布页面](https://github.com/gooftroop/react-image-magnify/releases)。 。 。 .

## 支助

请 [打开一个问题](https://github.com/gooftroop/react-image-magnify/issues)。 。 。 .

## 捐款

请使用 [Github 流量](https://guides.github.com/introduction/flow/)创建分支, 添加承诺,以及 [打开拉动请求](https://github.com/gooftroop/react-image-magnify/compare/)。 。 。 .

#### 开始

```sh
git clone https://github.com/gooftroop/react-image-magnify.git
cd react-image-magnify
npm install
npm run storybook
```

## 贡献者

感谢以下社区成员开放问题和拉出请求.

[![](https://contrib.rocks/image?repo=gooftroop/react-image-magnify)](https://github.com/gooftroop/react-image-magnify/graphs/contributors)

你真厉害

## 许可证

麻省理工学院

图标由 [免费派克](https://www.freepik.com/ "Freepik") 从 [www.flaticon.com (中文(简体) )](https://www.flaticon.com/ "Flaticon")

## 常见问题

### @blacklab/react-image-magnify 是什么？

响应图像缩放组件

### 如何安装 @blacklab/react-image-magnify？

在项目目录运行 npm install @blacklab/react-image-magnify，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@popperjs/core（^2\.11\.4）、@react-hook/resize-observer（^1\.2\.5）、detect-it（4\.0\.1）、react（^16\.8 \|\| ^17\.0\.0 \|\| ^18\.0）、react-dom（^16\.8 \|\| ^17\.0\.0 \|\| ^18\.0）、react-popper（^2\.2\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @blacklab/react-image-magnify 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @blacklab/react-image-magnify 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @blacklab/react-image-magnify 可以商用吗？

@blacklab/react-image-magnify 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blacklab/react-image-magnify 的下载量有多少？

根据 npm 官方下载统计，@blacklab/react-image-magnify 在 2026/10/09 – 2026/11/07 这 30 天内被下载 6,321 次，日均约 211 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blacklab/react-image-magnify 还在维护吗？

最新版本 4\.1\.1 发布于 2022/05/20（4 年前）；至今共发布 25 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/09/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。