모든 React 프로젝트에서 라이트박스를 쉽게 추가하는 방법

React를 위한 단순하지만 기능적인 라이트박스

GitHub | Official Website | CodeSandbox Demo | PRO version demo

간단한 소개 🧐

React로 프로젝트 중 하나를 작업할 때 모든 것이 시작되었습니다. 고객은 블로그 사이트를 가지고 있었고 블로그 게시물의 이미지에 라이트박스를 추가하기를 원했습니다. 문제는 백엔드에서 데이터를 가져와 각 게시물의 내용을 제어할 수 없다는 것입니다.

온라인에서 React용 라이트박스를 찾았지만 작동 방식은 이미지를 배열, 객체 등으로 미리 선언해야 한다는 것이었습니다. 콘텐츠의 이미지에 라이트박스를 추가하시겠습니까?

Simple React Lightbox는 직접 정의하든 외부 소스(API, 백엔드 등)에서 가져오든 이미지 세트에 라이트박스 기능을 추가할 수 있는 기능을 제공합니다. 포함된 구성 요소를 사용하여 앱을 래핑하고 옵션을 정의한 다음(원하는 경우) 이미지가 있거나 예상되는 콘텐츠 주변을 래핑하여 ""구성 요소를 사용하세요!

풍부한 기능 📦

첫 번째 버전이 나온 이후로 새롭고 유용한 기능을 많이 추가했습니다. 또한 PRO version은 더 많은 기능을 추가합니다. 일부 기능은 다음과 같습니다.

이미지 유효성 검사(손상된 이미지가 있는 경우 라이트박스에서 무시됨).

오디오 및 비디오 지원(PRO ONLY)

단순 사용자 정의 HTML 속성이 있는 요소 제외(PRO ONLY)

사용자 정의 아이콘 및 사용자 정의 캡션(PRO ONLY)

NextJS 및 Gatsby를 지원하고 Gatsby 이미지를 지원합니다.

더 많은 이미지가 로드되는지 확인하기 위해 관찰 가능합니다(예: API에서).

원하는 언어를 사용하여 아이콘을 번역하기 위한 번역(i18n 호환)(PRO ONLY)

라이트박스에 포함된 이미지 수, 선택된 슬라이드, 현재 슬라이드 전후에 오는 슬라이드를 포함하여 라이트박스의 상태를 가져오는 콜백입니다.
*후크! 하나는 라이트박스를 여는 용도(첫 번째 이미지 또는 패스 및 인덱스에서)와 라이트박스를 닫기 위한 것입니다.

설치

// With npm
npm install --save simple-react-lightbox
// or with Yarn
yarn add simple-react-lightbox

용법

가지고 놀 수 있도록 demo on CodeSandbox을 제공했거나 아래 지침을 따르십시오. 또는 PRO version에서 the official website으로 전체 데모를 시도할 수 있습니다.

지침

먼저 컨텍스트를 만들 수 있도록 기본 구성 요소로 React 앱을 "래핑"해야 합니다. 아래 예에서는 앱에서 필요할 때마다 Simple React Lightbox를 사용할 수 있습니다.

import React from "react";
import MyComponent from "./components/MyComponent";
import SimpleReactLightbox from "simple-react-lightbox"; 
// Import Simple React Lightbox
function App() {
  return (
    <div className="App">
      <SimpleReactLightbox>
        <MyComponent /> // Your App logic (Components, Router etc...)
      </SimpleReactLightbox>
    </div>
  );
}
export default App;

`
다음으로 라이트박스 기능을 추가하려는 이미지가 포함된 콘텐츠가 예상되는 모든 곳에서 SRLWrapper 구성 요소를 가져와서 사용하려고 합니다. 명명된 내보내기이므로 {}에 유의하세요. 이미지의 캡션은 이미지 "alt"속성에서 생성됩니다!

`

import React from "react";
import { SRLWrapper } from "simple-react-lightbox"; // Import SRLWrapper
function MyComponent() {
  return (
      <SRLWrapper>
        // This will be your content with the images. It can be anything. Content defined by yourself, content fetched from an API, data from a graphQL query... anything :)
      </SRLWrapper>
  );
}
export default MyComponent;

`
그게 다입니다 🥳 어떤 옵션도 전달하지 않으므로 아래 이미지와 같은 기본 옵션으로 작동하는 라이트박스가 있어야 합니다.

옵션

나는 당신이 생각하는 것을 압니다.

"That's cool and all but the style of the lightbox doesn't match the one of my project. That's ok though. I will use your classes and override everything with my custom styles…"

⚠️ 기다려! ⚠️ 라이트박스의 각 부분에 대한 클래스 이름을 정의했음에도 불구하고 추가 로직을 추가할 필요가 없도록 라이트박스를 사용자 정의하는 데 필요한 모든 옵션을 제공했습니다. 모든 것을 사용자 지정할 수 있습니다! GitHub 저장소의 옵션에 옵션을 추가하는 방법을 확인하세요.
맞춤 옵션이 있는 라이트박스



그게 다야! 앞으로 더 많은 기능을 추가할 계획이므로 Simple React Lightbox를 즐겨주시고 프로젝트를 계속 지켜봐 주시기 바랍니다.