比较3个顶级的React灯箱库

前端小工
1,401 阅读7分钟

在本指南中，我们将根据npm的每周下载量，比较React灯箱实现的前三个库。

我们将比较这三个灯箱库的安装方法、实现方式、优势和局限性，并帮助你找出你的React项目应该使用哪个灯箱实现。

什么是灯箱？

一个灯箱实现在你的屏幕上叠加一个图像或视频播放器，填满整个屏幕，并使屏幕的其他内容变暗。一个简单的灯箱实现看起来像这样。

A simple lightbox implementation
最初的灯箱是一个简单的JavaScript实现，后来在2012年被配置为jQuery。由于其易于实现和优雅的风格，jQuery的实现非常受欢迎。

该库后来被采用到许多不同的库中，比如我们在本文中要介绍的那些库。这些库也被改编为服务于今天的许多前端框架。

React Photoswipe Gallery

ReactPhotoswipe Gallery是一个围绕Photoswipe的React组件包装器，Photoswipe是一个开源的JavaScript灯箱插件，由Dmitry Semenov在2014年开发，具有零依赖性。React Photoswipe为跨平台应用提供了一些不错的触摸手势，例如。

  • 触摸放大或点击放大
  • 在移动设备上捏住关闭
  • 智能懒人加载
  • 支持响应式图片

要安装React Photoswipe Gallery，请运行以下命令。

npm install photoswipe react-photoswipe-gallery --save

基本用法

React Photoswipe Gallery软件包包含<Gallery /> 和<Items /> 组件，可用于任何基本的lightbox实现。<Gallery /> 组件是主要的 React Photoswipe Gallery 包装器，它实现了原始的 Photoswipe UI 和布局。

<Items /> 组件就像<Gallery /> 组件的一个子组件，用于传递预定义的图片尺寸，这是显示灯箱所需的。使用下面的代码片断来实现一个单图灯箱。

import "photoswipe/dist/photoswipe.css";
import "photoswipe/dist/default-skin/default-skin.css";

import { Gallery, Item } from "react-photoswipe-gallery";

function App() {
return (
  <Gallery>
    <Item
      original="https://picsum.photos/1024/768?image=2"
      thumbnail="https://picsum.photos/200/300?image=2"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img
          ref={ref}
          onClick={open}
          src="https://picsum.photos/200/300?image=2"
        />
      )}
    </Item>
  </Gallery>
);
}

export default App;

A single-image React Photoswipe lightbox gallery

要创建一个多图像的灯箱画廊，只需向<Gallery /> 组件添加更多的项目。

import "photoswipe/dist/photoswipe.css";
import "photoswipe/dist/default-skin/default-skin.css";

import { Gallery, Item } from "react-photoswipe-gallery";

function App() {
return (
  <Gallery>
    <Item
      original="https://picsum.photos/1024/768?image=2"
      thumbnail="https://picsum.photos/200/300?image=2"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img
          ref={ref} onClick={open}
 src="https://picsum.photos/200/300?image=2" />
      )}
    </Item>
    <Item
      original="https://picsum.photos/1024/768?image=3"
      thumbnail="https://picsum.photos/200/300?image=3"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} 
src="https://picsum.photos/200/300?image=3" />
      )}
    </Item>
  </Gallery>
);
}

export default App;

React Photoswipe Gallery还提供了一个<CustomGallery /> 组件和一个<DefaultLayout /> 组件来编辑原始的Photoswipe UI和布局。例如，你可以通过创建一个CSS文件来定制你的UI，然后在你的<CustomGallery /> 组件中引用该CSS文件作为UI 的道具。

你可以在他们的文档中了解更多关于React Photoswipe Gallery的信息。

优点

  • 易于设置和实施
  • 积极维护，有良好的文档记录的库
  • 易于配置和定制
  • 具有很好的功能，如平滑过渡、触摸手势和缩放，这使得在移动设备和网络上实现相同的功能非常容易。

局限性

  • 对音频和视频文件的零支持
  • 不支持内联画廊
  • 需要预设图片尺寸

最后一点会对灯箱图片在不同屏幕尺寸上的表现产生巨大影响。解决这个问题的方法是为同一张图片创建多个灯箱版本，但尺寸不同，根据屏幕尺寸的不同，用响应式CSS显示给用户。

简单的React灯箱

Simple React Lightbox库是三个灯箱包中最受欢迎的一个。Simple React Lightbox提供了一个React组件包装器（<SRLWrapper /> ），用于对来自任何外部来源的图片、音频或视频文件实现灯箱功能，包括你可以定义的。

值得一提的是，Simple React Lightbox有一个免费版本和一个付费的专业版本，该版本目前处于停滞状态。免费版只让你为图片添加灯箱功能，而专业版则让你有额外的能力在音频和视频文件中实现灯箱。

与React Photoswipe Gallery类似，Simple React Lightbox也允许你在灯箱的基础上进行建设，比如定制你的用户界面和布局，添加触摸手势和缩略图库等。

要开始使用Simple React Lightbox，运行以下命令将其安装在你的项目中。

npm install --save simple-react-lightbox

然后，将Simple React Lightbox上下文添加到你的主要React组件。

import SimpleReactLightbox from 'simple-react-lightbox'

ReactDOM.render(
 <React.StrictMode>
   <SimpleReactLightbox>
     <App />
   </SimpleReactLightbox>
 </React.StrictMode>,
 document.getElementById("root")
);

基本用法

如前所述，Simple React Lightbox提供了一个<SRLWrapper /> 组件，可以包裹在图片上实现Lightbox功能。

你可以使用下面的代码片断来实现一个简单的、单一的图片灯箱。<a /> 标签应包含灯箱图片的链接，而<img /> 应包含缩略图的链接。

import { SRLWrapper } from "simple-react-lightbox";


function App() {
 return (
   <SRLWrapper>
     <div>
       <a href="https://picsum.photos/1024/768?image=2">
         <img src="https://picsum.photos/200/300?image=2" alt="lightbox" />
       </a>
     </div>
   </SRLWrapper>
 );
}

export default App;

A Simple React Lightbox single-image gallery

你也可以通过向<SRLWrapper /> 组件添加更多图片来创建一个缩略图库。内嵌式画廊会自动添加到灯箱中。

import { SRLWrapper } from "simple-react-lightbox";


function App() {
 return (
   <SRLWrapper>
     <div>
       <a href="https://picsum.photos/1024/768?image=2">
         <img src="https://picsum.photos/200/300?image=2" alt="lightbox" />
       </a>
       <a href="https://picsum.photos/1024/768?image=3">
         <img src="https://picsum.photos/200/300?image=3" alt="lightbox1" />
       </a>
       <a href="https://picsum.photos/1024/768?image=4">
         <img src="https://picsum.photos/200/300?image=4" alt="lightbox2" />
       </a>
       <a href="https://picsum.photos/1024/768?image=5">
         <img src="https://picsum.photos/200/300?image=5" alt="lightbox3" />
       </a>
     </div>
   </SRLWrapper>
 );
}

export default App;

A multi-image gallery with Simple React Lightbox

与React Photoswipe相比，Simple React Lightbox UI的可定制性更强。你可以通过将设置、标题、缩略图和按钮道具作为选项传递给<SRLWrapper /> 组件来轻松编辑UI。比如说。

import { SRLWrapper } from "simple-react-lightbox";

const options = {
 buttons: {
   iconColor: "##610604",
   iconPadding: "10px"
 },
 caption: {
   captionColor: "#61O6O4",
   captionFontSize: "20px",
 },
 settings: {
   overlayColor: "#D8B863"
 },
 thumbnails: {
   thumbnailsAlignment: "center",
 },
};

function App() {
 return (
   <SRLWrapper options={options}>
     <div>
       <a href="https://picsum.photos/1024/768?image=2">
         <img src="https://picsum.photos/200/300?image=2" alt="lightbox" />
       </a>
       <a href="https://picsum.photos/1024/768?image=3">
         <img src="https://picsum.photos/200/300?image=3" alt="lightbox1" />
       </a>
       <a href="https://picsum.photos/1024/768?image=4">
         <img src="https://picsum.photos/200/300?image=4" alt="lightbox2" />
       </a>
       <a href="https://picsum.photos/1024/768?image=5">
         <img src="https://picsum.photos/200/300?image=5" alt="lightbox3" />
       </a>
     </div>
   </SRLWrapper>
 );
}

export default App;

上面的代码将重新设计UI，变成这样。

The redesigned UI in Simple React Lightbox

优点

  • 简单的React Lightbox非常容易设置、实现和定制
  • 积极维护，文档丰富的库，非常容易配置
  • 具备惊人的功能，如触摸手势、缩略图支持等。

局限性

  • 该软件包仅在付费版本中支持视频和音频文件。

React Lightgallery

React Lightgallery是另一个围绕lightGallery.js的React组件包装器，这是一个模块化的JavaScript图片和视频灯箱画廊插件。React Lightgallery预装了一些功能，如内联画廊、捏合缩放和滑动关闭等。它也是跨设备的，在移动设备和网络上都能很好地工作。

你可以用以下命令在你的项目中安装React Lightgallery。

npm install --save react-lightgallery

然后，导入Lightgallery的CSS文件，并将React Lightgallery上下文添加到你的主React组件。

import "lightgallery.js/dist/css/lightgallery.css";
import { LightgalleryProvider } from "react-lightgallery";

ReactDOM.render(
 <React.StrictMode>
   <LightgalleryProvider>
     <App />
   </LightgalleryProvider>
 </React.StrictMode>,
 document.getElementById("root")
);

基本用法

React Lightgallery提供了一个<LightgalleryItem /> 组件，可以用来轻松实现单图灯箱功能。

import { LightgalleryItem } from "react-lightgallery";

function App() {
 return (
   <div>
     <LightgalleryItem src="https://picsum.photos/1024/768?image=2">
       <img src="https://picsum.photos/200/300?image=2" />
     </LightgalleryItem>
   </div>
 );
}

export default App;

A single-image lightbox implementation with React Lightgallery

React Lightgallery还提供了对内联画廊的支持。

import { LightgalleryItem } from "react-lightgallery";

function App() {
 return (
   <div>
     <LightgalleryItem src="https://picsum.photos/1024/768?image=2">
       <img src="https://picsum.photos/200/300?image=2" />
     </LightgalleryItem>
     <LightgalleryItem src="https://picsum.photos/1024/768?image=1">
       <img src="https://picsum.photos/200/300?image=1" />
     </LightgalleryItem>
   </div>
 );
}

export default App;

An inline gallery implementation with React Lightgallery

React Lightgallery包可以很容易地根据你的需要进行配置和定制。该包提供了一个支持的原始lightGallery.js插件和道具列表，用于扩展<LightgalleryItem /> 组件。例如，你可以通过在<LightgalleryItem /> 组件中添加lg-share.j 插件作为plugins 道具来轻松实现社交分享。

React Lightgallery包还提供了对React高阶组件（withLightgallery ）和React Hook（useLightgallery ）的访问，以便在<LightgalleryProvider /> 。

你可以通过访问React Lightgallery文档了解更多关于如何使用插件、道具、高阶组件和React Hook。

优点

  • 易于设置、实施和定制
  • 优秀的文档
  • 具备惊人的功能，如内联画廊、捏合缩放、滑动关闭等。

局限性

  • 该软件包还没有对视频和音频灯箱的任何支持

你应该为你的React项目使用哪个灯箱实现？

这三个React灯箱库是在你的项目中实现灯箱功能的绝佳选择，但是，为你的项目选择一个最终的库应该取决于你项目的具体要求。

React Photoswipe Gallery和React Lightgallery提供了很多惊人的功能，但两者都缺乏对视频和音频文件的支持。虽然Simple React Lightbox提供了视频和音频灯箱支持，但它只在其付费版本中提供，目前该版本正处于停滞状态。如果你需要在照片灯箱之外实现视频灯箱，你可以使用React Image and Video Lightbox这样的软件包来实现。

最后，值得一提的是，Simple React Lightbox拥有三者中最大的社区。这意味着当你使用这个软件包时，你将获得比其他软件包更多的支持。

avatar
文章
阅读
粉丝