大家好，今天給大家分8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫。

網站開發必備」8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫

在不斷髮展的網路開發世界中，開源庫提供了大量創新和效率的機會。本文將帶您瞭解一些用於Gallery, Lightbox, 和 Photo Viewer的最好的開源 React 庫，為您的下一個專案提供寶貴的資源。

這些庫可以與基於 React 的框架（例如 Next.js）一起使用，或者與Astro 框架一起使用。

1. React lightbox component

React lightbox component是一個開源免費的React 庫元件，使開發人員能夠向任何 React 應用程式新增響應式多功能 Lightbox 效果。

其當前功能包括縮放、旋轉、流暢動畫和可自定義的縮圖。

安裝

npm install react-lightbox-component

簡單使用

import Lightbox from 'react-lightbox-component';

const App = () => (
  <div>
    <Lightbox images={
      [
        {
          src: 'some image url',
          title: 'image title',
          description: 'image description'
        }
      ]
    }/>
  </div>
);

2. React Spring Lightbox

React-spring-lightbox 是一個靈活的影像庫燈箱，具有原生感覺的觸控手勢和流暢的動畫。

它複製了硬體加速的原生影像應用程式的輸入使用者體驗，支援手勢和功能，例如滑鼠滾輪、滑動、點選+拖動、鍵盤控制、縮放、放大影像平移和基於彈簧的動畫。它允許實現您自己的 UI，並且不需要外部 CSS。

它流暢，輕便，並具有高度可定製的選項。

安裝

yarn add react-spring-lightbox styled-components

簡單使用

import React, { useState } from 'react';
import Lightbox from 'react-spring-lightbox';

const images = [
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
    alt: 'Windows 10 Dark Mode Setting'
  },
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
    alt: 'macOS Mojave Dark Mode Setting'
  },
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',
    alt: 'Android 9.0 Dark Mode Setting'
  }
];

const CoolLightbox = () => {
  const [currentImageIndex, setCurrentIndex] = useState(0);

  const gotoPrevious = () =>
    currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);

  const gotoNext = () =>
    currentImageIndex + 1 < images.length &&
    setCurrentIndex(currentImageIndex + 1);

  return (
    <Lightbox
      isOpen={true}
      onPrev={gotoPrevious}
      onNext={gotoNext}
      images={images}
      currentIndex={currentImageIndex}
      /* Add your own UI */
      // renderHeader={() => (<CustomHeader />)}
      // renderFooter={() => (<CustomFooter />)}
      // renderPrevButton={() => (<CustomLeftArrowButton />)}
      // renderNextButton={() => (<CustomRightArrowButton />)}
      // renderImageOverlay={() => (<ImageOverlayComponent >)}

      /* Add styling */
      // className="cool-class"
      // style={{ background: "grey" }}

      /* Handle closing */
      // onClose={handleClose}

      /* Use single or double click to zoom */
      // singleClickToZoom

      /* react-spring config for open/close animation */
      // pageTransitionConfig={{
      //   from: { transform: "scale(0.75)", opacity: 0 },
      //   enter: { transform: "scale(1)", opacity: 1 },
      //   leave: { transform: "scale(0.75)", opacity: 0 },
      //   config: { mass: 1, tension: 320, friction: 32 }
      // }}
    />
  );
};

export default CoolLightbox;

3. Yet Another React Lightbox

一款現代化 React 燈箱元件Yet Another React Lightbox。高效能、易於使用、可定製和可擴充套件。

它支援 React 18、17 和 16.8.0+，併為鍵盤、滑鼠、觸控板和觸控式螢幕導航提供 UX 支援。

安裝

npm install 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" },
        ]}
      />
    </>
  );
}

4. React LightBox Pack

React LightBox Pack一個輕量級的 NPM LightBox 包，其構建時考慮到了簡單性。不需要任何額外的依賴項即可工作。

安裝

npm i react-lightbox-pack

5. Lightbox-like Image viewer for React

網站開發必備」8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫

Lightbox-like是一個功能強大的庫，可提供全面且互動式的檢視體驗。它支援縮放、旋轉和移動等功能，適用於單張或多張影像。它具有基本的觸控支援，並具有響應式設計，使其能夠適應各種裝置螢幕。

此外，它還支援 360 度旋轉，提供豐富的使用者體驗。它還支援觸控和全鍵盤，展現了其在不同使用者互動中的多功能性。

安裝

npm install react-awesome-lightbox

簡單使用

程式碼引用

import Lightbox from "react-awesome-lightbox";
// You need to import the CSS only once
import "react-awesome-lightbox/build/style.css";

單張圖片

<Lightbox image="image_url" title="Image Title">

多張圖片

let images = [
    {
        url:"image_url1",
        title:"image title 1"
    },
    {
        url:"image_url2",
        title:"image title 2"
    }
]
<Lightbox images={images}>

6. React Image Viewer

網站開發必備」8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫

react-image-viewer一個簡單輕量的 React 元件，支援在響應式網頁中顯示影像。

安裝

npm install react-image-viewer

簡單使用

class Demo extends React.Component {
  render() {
    const style = {
      width: 400,
      height: 300,
      backgroundSize: 'cover'
    };
    const config = {
      viewedImageSize: 0.8,
      backgroundOpacity: 0.6
    };
    return (
      <div>
        <ImageViewer
          style={style}
          config={config}
          image="http://***"
        />
      </div>
    );
  }
}

7. React Photo View

網站開發必備」8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫

React photo preview 元件提供觸控手勢、拖拽平移物理效果滑動、雙指縮放、動畫連線、自適應影像渲染、自定義預覽、鍵盤導航、自定義節點擴充套件和伺服器端渲染支援等功能。它基於 TypeScript，Gzip 壓縮後大小為 7KB，並提供簡單易用的 API。

安裝

npm install react-photo-view

簡單使用

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

8. React Picture Viewer

網站開發必備」8款免費 React Gallery, Lightbox, 和 Photo Viewer開發庫

React Picture Viewer 是 React 的無依賴圖片檢視器，允許在視口內自由拖動和縮放圖片，並可調整最小/最大縮放尺寸。

安裝

npm install react-picture-viewer --save

簡單使用

import ReactPictureViewer from 'react-picture-viewer';

class Demo extends React.Component {
  // ...
  render() {
    return (
      <div>
        <ReactPictureViewer>
          <img src="..." alt="picture" draggable="false" />
        </ReactPictureViewer>
      </div>
     )
  }
  // ...
}