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

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

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

Я проверил в Интернете какой-то световой короб для React, но они работали так, что мне приходилось заранее объявлять изображения в массиве, объекте и т. Д., Но что, если вы не знаете, какой контент вы получите, и вы просто хотите добавить световой короб к изображениям в контенте? 😞

Моя идея 💡

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

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

С момента выхода первой версии я добавил массу новых полезных функций. Самый последний из них включает:

  • Проверка изображения (если у вас есть битое изображение, оно будет проигнорировано световым окном).
  • Поддержка NextJS и Gatsby и поддержка изображений Gatsby.
  • Наблюдаемый, чтобы проверить, загружены ли другие изображения (например, из API).
  • Обратные вызовы помогут вам в случае, если пользователю нужно получить статус светового окна, включая подсчет количества изображений, которые он содержит, какой слайд выбран и какие слайды идут до и после текущего.
  • Новые и переработанные параметры, чтобы сделать ваш код более чистым и читаемым, а также упростить использование светового окна.
  • Крючки! Один для открытия лайтбокса (из первого изображения или прохождения и указателя) и один для закрытия лайтбокса.
  • Пользовательские подписи!
  • Многое другое…

Установить

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

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

Я предоставил вам демонстрацию CodeSandbox, с которой вы можете поиграть, или вы можете просто следовать приведенным ниже инструкциям. Как вариант, вы можете поиграть с демоверсией на официальном сайте https://www.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 (
    <div className="MyComponent">
      <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>
    </div>
  );
}
export default MyComponent;

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

Пользовательская галерея

По многочисленным просьбам я добавил возможность использовать световой короб более традиционным способом. Если вы хотите создать галерею, в которой миниатюры заключены в ссылку, указывающую на полноразмерное изображение, теперь вы можете это сделать. (Вы можете проверить пример страницы Галерея со ссылками на демо CodeSandbox).

Просто оберните свои изображения (в идеале миниатюры) в ссылку с data-attribute="SRL". Как обычно, атрибут alt для изображений будет использоваться в качестве заголовка, если он объявлен.

import React from "react";
import { SRLWrapper } from "simple-react-lightbox"; 
// Import SRLWrapper
function MyComponent() {
  return (
    <div className="MyComponent">
      <SRLWrapper>
        <a href="link/to/the/full/width/image.jpg" data-attribute="SRL">
          <img src="src/for/the/thumbnail/image.jpg" alt="Umbrella" />
        </a>
        <a href="link/to/the/full/width/image_two.jpg" data-attribute="SRL">
          <img src="src/for/the/thumbnail/image_two.jpg" alt="Umbrella" />
        </a>
        // More images...
      </SRLWrapper>
    </div>
  );
}
export default MyComponent;

Параметры

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

«Это круто, но стиль лайтбокса не соответствует моему проекту. Хотя это нормально. Я буду использовать ваши классы и заменю все своими собственными стилями… »

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

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