React-Medium-Image-Zoom 技术文档

React-Medium-Image-Zoom 技术文档

react-medium-image-zoom 🔎 🏞 The original medium.com-inspired image zooming library for React (since 2016) 项目地址: https://gitcode.com/gh_mirrors/re/react-medium-image-zoom

React-Medium-Image-Zoom 是一个灵感源自于 Medium.com 的图片放大库，专为 React 开发者设计。该库使图像缩放功能变得简单而优雅，支持多种图像元素和属性，确保了良好的可访问性和兼容性。

安装指南

要开始使用 React-Medium-Image-Zoom，你需要先将其添加到你的项目中。如果你的项目是基于 npm 或 yarn 管理的，可以使用以下命令：

npm install --save react-medium-image-zoom

或者，如果你使用的是 yarn：

yarn add react-medium-image-zoom

记得同时导入默认样式文件以确保正确的样式呈现：

import 'react-medium-image-zoom/dist/styles.css';

项目的使用说明

React-Medium-Image-Zoom 提供了一个灵活的接口来处理图像缩放，既可以直接使用（无状态组件），也可以通过控制状态的方式来使用（有状态组件）。

基础示例

直接使用 (Uncontrolled)

这是一个基础的使用案例，只需将 <img> 元素包裹在 <Zoom> 组件内。

import React from 'react';
import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

export const SimpleExample = () => (
  <Zoom>
    <img
      alt="示例图片"
      src="/path/to/your-image.jpg"
      width="500"
    />
  </Zoom>
);

控制使用 (Controlled)

对于需要更精细控制的应用场景，可以使用 Controlled 版本的组件并管理 isZoomed 状态。

import React, { useState } from 'react';
import { Controlled as ControlledZoom } from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

const ControlledExample = () => {
  const [isZoomed, setIsZoomed] = useState(false);

  return (
    <ControlledZoom isZoomed={isZoomed} onZoomChange={setIsZoomed}>
      <img
        alt="控件示例图片"
        src="/path/to/your-controlled-image.jpg"
        width="500"
      />
    </ControlledZoom>
  );
};

export default ControlledExample;

项目API使用文档

React-Medium-Image-Zoom 提供了一系列属性让你自定义其行为，包括但不限于：

• a11yNameButtonZoom: 缩放按钮的辅助文本。
• children: 必填，需要放大的图片或其他元素。
• isZoomed（仅限受控组件）: 控制缩放状态的布尔值。
• zoomImg: 放大时使用的图片属性。
• wrapElement: 包裹元素类型，默认为 'div'。
• ZoomContent: 自定义放大视图的内容。

完整API文档包含更多的定制选项，允许你调整图像位置、大小以及交互体验等。

项目依赖安装

由于 React-Medium-Image-Zoom 设计为零依赖，安装过程仅涉及上述的单一包安装步骤。但是，为了确保最佳兼容性，你的环境应支持 ES2021 标准，且注意项目对 <dialog> 和 ResizeObserver API 的需求，这些特性可能需要polyfills在较老的浏览器上运行。

---

以上就是使用 React-Medium-Image-Zoom 的基本指导和关键概念。结合故事书例子和其他文档资源，你可以进一步探索和定制这个库，以满足你的特定项目需求。

react-medium-image-zoom 🔎 🏞 The original medium.com-inspired image zooming library for React (since 2016) 项目地址: https://gitcode.com/gh_mirrors/re/react-medium-image-zoom