Простой, но функциональный лайтбокс для React

Краткое введение 🧐

Все началось, когда я работал над одним из своих проектов с React. У клиента был сайт блога, и он хотел добавить лайтбокс к изображениям в сообщениях блога. Проблема заключалась в том, что данные извлекались из серверной части, и я не мог контролировать содержимое каждого сообщения.
Я искал в Интернете несколько лайтбоксов для React, но они работали так, что мне приходилось заранее объявлять изображения. либо в массиве, либо в объекте, и т. д., но что, если вы не знаете, какой контент вы получаете, и вы просто хотите добавить лайтбокс к изображениям в контенте?

Simple React Lightbox дает вам возможность добавлять функциональные возможности лайтбокса к набору изображений, независимо от того, определяете ли вы их самостоятельно или получаете из внешнего источника (API, серверная часть и т. д.). Просто используйте включенный компонент, чтобы обернуть им свое приложение, определить свои параметры (если хотите), а затем использовать компонент ‹SRLWrapper›, обернув его вокруг контента, где у вас есть или ожидаются ваши изображения!

Упакован с функциями 📦

С момента выхода первой версии я добавил массу новых и полезных функций. Кроме того, версия PRO (всего за 4,99 доллара США) добавляет еще больше возможностей. Некоторые из особенностей:

  • Проверка изображения (если у вас битое изображение, оно будет проигнорировано лайтбоксом).
  • Поддержка аудио и видео (ТОЛЬКО PRO)
  • Исключить элементы с простым пользовательским атрибутом HTML (ТОЛЬКО PRO)
  • Пользовательские значки и подписи (ТОЛЬКО PRO)
  • Поддержка NextJS и Gatsby, а также поддержка образов Gatsby.
  • Наблюдаемый, чтобы проверить, загружены ли другие изображения (например, из API).
  • Переводы (совместимые с i18n) для перевода значков на выбранный вами язык (ТОЛЬКО PRO)
  • Обратные вызовы для получения состояния лайтбокса, включая подсчет количества изображений, которые он содержит, какой слайд выбран и какие слайды идут до и после текущего.
  • Крючки! Один для открытия лайтбокса (с первого изображения или проходящего и индексного) и один для закрытия лайтбокса.

Установить

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

использование

Я предоставил вам демо-версию на CodeSandbox, чтобы вы могли поиграть, или вы можете просто следовать приведенным ниже инструкциям. Кроме того, вы можете попробовать полную демо-версию с PRO-версией на официальном сайте https://demo.simple-react-lightbox.dev.



Simple-React-Lightbox — CodeSandbox
Простой, но функциональный лайтбокс для React.codesandbox.io



инструкции

Прежде всего, вам нужно «обернуть» ваше приложение 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 везде, где вы ожидаете контент с изображениями, к которым вы хотите добавить функциональность лайтбокса. Обратите внимание на {}, так как это именованный экспорт. Подпись к изображениям будет сгенерирована из атрибута image «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;

Вот и все 🥳 Поскольку мы не передаем никакие параметры, у вас должен быть работающий лайтбокс с параметрами по умолчанию, как на изображении ниже:

Опции

Я знаю, что вы думаете.

"Это круто и все такое, но стиль лайтбокса не соответствует стилю моего проекта. Это нормально. Я воспользуюсь вашими классами и заменю все своими собственными стилями…”

⚠️ ЖДИТЕ! ⚠️ Несмотря на то, что я определил имена классов для каждой части лайтбокса, я предоставил все параметры, необходимые для настройки лайтбокса, чтобы вам не пришлось добавлять какую-либо дополнительную логику. Вы можете настроить все! Проверьте, как добавить параметры в параметрах репозитория GitHub.

Вот и все! Надеюсь, вам понравится Simple React Lightbox, и вы продолжите следить за проектом, так как в будущем я планирую добавить больше функций.