然而,另一个反射灯盒

现代反应灯盒组件. 表演者,易于使用,可定制和可扩展.

概览

• 为反应所建 : 与反应18、17和16.8.0+合作
• UX : (韩语) 支持键盘、鼠标、触摸板和触摸屏导航
• 预装 : 从未显示部分下载的图像
• 性能 : 在不损害性能或UX的情况下预装有限数量的图像
• 响应 : 框外支持带有自动分辨率切换的响应图像
• 视频 : 通过可选插件支持视频幻灯片
• 缩放 : 通过可选插件支持图像缩放
• 自定义 : 自定义任何 UI 元素或添加自定义幻灯片
• 没有出血 : 从未捆绑过很少使用的特性; 通过插件添加可选特性
• 类型脚本 : 类型定义出现在软件包中
• RTL: (英语) 兼容RTL布局

文档

https://yet-an-other-react-lightbox.com/documentation 页面存档备份,存于互联网档案馆

实例

https://yet-another-resact-lightbox.com/examples 页面存档备份,存于互联网档案馆

安装

npm install yet-another-react-lightbox

或者说

yarn add yet-another-react-lightbox

最小设置示例

import * as React from "react";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

export default function App() {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <button type="button" onClick={() => setOpen(true)}>
                Open Lightbox
            </button>

            <Lightbox
                open={open}
                close={() => setOpen(false)}
                slides={[{ src: "/image1.jpg" }, { src: "/image2.jpg" }, { src: "/image3.jpg" }]}
            />
        </>
    );
}

建议设置

与其他许多灯盒库不同,然而"又一反应"灯盒没有"thumbnail"或"原生"的概念 (或"全尺寸")相相. 我们使用响应图像 推荐您提供不同的文件 每个图像的分辨率。 然而,另一个反应灯盒自动弹出 srcset 编号 : sizes 属性和允许 浏览器决定哪个图像更适合其视图大小.

import * as React from "react";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

export default function App() {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <button type="button" onClick={() => setOpen(true)}>
                Open Lightbox
            </button>

            <Lightbox
                open={open}
                close={() => setOpen(false)}
                slides={[
                    {
                        src: "/image1x3840.jpg",
                        alt: "image 1",
                        width: 3840,
                        height: 2560,
                        srcSet: [
                            { src: "/image1x320.jpg", width: 320, height: 213 },
                            { src: "/image1x640.jpg", width: 640, height: 427 },
                            { src: "/image1x1200.jpg", width: 1200, height: 800 },
                            { src: "/image1x2048.jpg", width: 2048, height: 1365 },
                            { src: "/image1x3840.jpg", width: 3840, height: 2560 },
                        ],
                    },
                    // ...
                ]}
            />
        </>
    );
}

也可以通过自定义渲染函数来整合第三方图像组件(如Next.js Image或Gatsby Image). 见 实例 在文档网站上.

插件

然而,另一个反应灯盒允许您根据您的要求通过插件在您的工程中添加可选功能 .

以下插件被捆绑在软件包中 :

• 说明 - 为幻灯片标题添加支持 说明
• 计数器 - 添加幻灯片计数器
• 下载 - 添加下载按钮
• 全屏 - 增加全屏模式的支持
• 内入 - 将灯盒变成相机
• 份额 - 添加共享按钮
• 幻灯片放映 - 添加幻灯片放映按钮
• 缩略图 - 增加缩略图音轨
• 视频 - 为视频幻灯片增加支持
• 缩放 - 添加图像缩放功能

许可证

麻省理工学院 2022年 伊戈尔·丹琴科