@uxndigital/React-Fancybox

Fancybox React 组件

一个基于 @fancyapps/ui 的 React 封装组件，用于图片预览、视频播放等功能。

安装

pnpm i

开发

pnpm dev

构建

pnpm build

代码检查与修复

# 检查代码
pnpm lint

# 修复代码格式
pnpm fix

组件使用说明

基础图片预览

最简单的使用方式是通过 Fancybox.Media 和 Fancybox.Thumbnail 组件来展示图片：

<Fancybox>
  <Fancybox.Media href="https://lipsum.app/id/60/1600x1200">
    <Fancybox.Thumbnail
      src="https://lipsum.app/id/60/200x150"
      width="200"
      height="150"
    />
  </Fancybox.Media>
</Fancybox>

图片组

可以通过 Fancybox.Group 将多张图片组合在一起：

<Fancybox>
  <Fancybox.Group id="gallery1">
    <Fancybox.Media href="https://lipsum.app/id/60/1600x1200">
      <Fancybox.Thumbnail
        src="https://lipsum.app/id/60/200x150"
        width="200"
        height="150"
      />
    </Fancybox.Media>
    <Fancybox.Media href="https://lipsum.app/id/61/1600x1200">
      <Fancybox.Thumbnail
        src="https://lipsum.app/id/61/200x150"
        width="200"
        height="150"
      />
    </Fancybox.Media>
  </Fancybox.Group>
</Fancybox>

视频预览

支持 Vimeo、YouTube 等视频链接的预览：

<Fancybox>
  <Fancybox.Media href="https://vimeo.com/259411563">
    <Fancybox.Thumbnail
      src="https://i.vimeocdn.com/video/687867313-3354aaaac23bd9fa40bdab9cfb6ba478b802acd47ef2522f9473ff7b1ce62790-d_260x146"
      width="200"
      height="150"
    />
  </Fancybox.Media>
</Fancybox>

编程式触发

可以通过 API 方法来触发预览：

import { openGroup, openInstance } from './api';

// 打开指定 ID 的图片组
openGroup('gallery1');

// 打开指定 ID 的 Fancybox 实例
openInstance('instanceId');

开发说明

• 组件开发时请在对应目录下创建 *.fixture.tsx 文件进行组件预览和测试
• 使用 Cosmos 进行组件开发和调试
• 代码提交前请确保通过 lint 检查

组件属性说明

Fancybox

• id: 可选，Fancybox 实例的唯一标识
• children: 必选，Fancybox 的内容

Fancybox.Media

• href: 必选，预览内容的 URL
• children: 必选，预览内容的缩略图

Fancybox.Thumbnail

• src: 必选，缩略图 URL
• width: 可选，缩略图宽度
• height: 可选，缩略图高度

Fancybox.Group

• id: 必选，图片组的唯一标识
• children: 必选，图片组的内容