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

Библиотека BasicLightbox позволяет легко и быстро создавать модальные окна для отображения изображений, видео или другого контента. Она хорошо подходит для использования в веб-приложениях, включая те, которые построены с использованием React. Внедрение этой библиотеки в React-приложение не вызывает особых трудностей и может быть выполнено с помощью стандартных подходов, характерных для работы с сторонними библиотеками в React.

Установка и настройка

Для начала необходимо установить саму библиотеку через npm или yarn:

npm install basiclightbox

или

yarn add basiclightbox

После этого можно приступать к интеграции библиотеки в проект.

Импорт библиотеки

Для работы с BasicLightbox в React необходимо импортировать её в компонент, где требуется использовать модальное окно:

import basicLightbox from 'basiclightbox';

Создание компонента с модальным окном

В React все компоненты обычно управляются через состояние. Для работы с BasicLightbox это состояние понадобится, чтобы управлять открытием и закрытием модального окна. Рассмотрим пример, где при клике на изображение открывается модальное окно с увеличенной версией этого изображения.

import React, { useState } from 'react';
import basicLightbox from 'basiclightbox';

const ImageModal = ({ imageUrl }) => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    const modal = basicLightbox.create(
      `<img src="${imageUrl}" />`,
      {
        onClose: () => setIsOpen(false),
      }
    );
    modal.show();
    setIsOpen(true);
  };

  return (
    <div>
      <img 
        src={imageUrl} 
        alt="Thumbnail" 
        onCl ick={openModal} 
        style={{ cursor: 'pointer' }} 
      />
    </div>
  );
};

export default ImageModal;

Разбор компонента

  1. useState: С помощью хука useState создаём состояние isOpen, которое отслеживает, открыто ли модальное окно. В этом примере состояние не используется для явного управления видимостью модального окна, так как библиотека уже сама управляет этим состоянием, но его можно использовать для дополнительных действий.

  2. openModal: В функции openModal создается экземпляр модального окна с помощью метода basicLightbox.create(). В параметре передается строка с HTML-контентом (в данном случае это изображение). В качестве опций передается объект с функцией onClose, которая обновляет состояние при закрытии окна.

  3. onClick: Событие onClick на изображении вызывает функцию openModal, которая открывает модальное окно с увеличенной версией изображения.

Управление несколькими окнами

Если в приложении необходимо управлять несколькими модальными окнами (например, открывать несколько изображений в разных модальных окнах), можно расширить компонент следующим образом:

import React, { useState } from 'react';
import basicLightbox from 'basiclightbox';

const Gallery = ({ images }) => {
  const [activeModal, setActiveModal] = useState(null);

  const openModal = (imageUrl) => {
    const modal = basicLightbox.create(
      `<img src="${imageUrl}" />`,
      {
        onClose: () => setActiveModal(null),
      }
    );
    modal.show();
    setActiveModal(modal);
  };

  return (
    <div>
      {images.map((imageUrl, index) => (
        <img 
          key={index} 
          src={imageUrl} 
          alt={`Thumbnail ${index}`} 
          onCl ick={() => openModal(imageUrl)} 
          style={{ cursor: 'pointer', margin: 10 }} 
        />
      ))}
    </div>
  );
};

export default Gallery;

Здесь добавлена поддержка нескольких изображений в виде галереи. Для каждого изображения создается отдельное окно. В случае с несколькими окнами важно следить за состоянием активного окна, чтобы можно было контролировать, какое изображение показывается в модальном окне в каждый момент времени.

Обработка закрытия окна

В случае использования BasicLightbox в React часто возникает необходимость обрабатывать закрытие модальных окон, например, для выполнения дополнительных действий (удаление данных, изменение состояния компонента и так далее).

Библиотека предоставляет событие onClose, которое можно использовать для этих целей. Для примера, можно реализовать удаление модального окна с обновлением состояния компонента при его закрытии.

const openModal = (imageUrl) => {
  const modal = basicLightbox.create(
    `<img src="${imageUrl}" />`,
    {
      onClose: () => {
        setActiveModal(null);  // Обновление состояния при закрытии модального окна
      },
    }
  );
  modal.show();
  setActiveModal(modal);  // Хранение активного модального окна
};

Использование модальных окон с видео

Модальные окна также могут быть использованы для отображения видео. Для этого достаточно передать HTML-контент с тегом <video>. Пример компонента для работы с видео:

const VideoModal = ({ videoUrl }) => {
  const openModal = () => {
    const modal = basicLightbox.create(
      `<video controls autoplay>
        <source src="${videoUrl}" type="video/mp4" />
        Your browser does not support the video tag.
      </video>`,
      {
        onClose: () => console.log('Video modal closed'),
      }
    );
    modal.show();
  };

  return (
    <div>
      <button onCl ick={openModal}>Open Video</button>
    </div>
  );
};

Здесь используется стандартный HTML5 тег <video>, в котором указывается источник видео и атрибуты управления воспроизведением.

Стилизация модальных окон

Стандартное модальное окно, созданное с помощью BasicLightbox, имеет базовые стили, но их можно изменять, если это необходимо для соответствия дизайну приложения. Для изменения внешнего вида модального окна можно использовать кастомные стили с помощью CSS.

Например, если требуется изменить фон модального окна, можно добавить следующие стили:

.basicLightbox .basicLightbox__placeholder {
  background-color: rgba(0, 0, 0, 0.8); /* Темный фон для модального окна */
}

.basicLightbox .basicLightbox__content {
  border-radius: 10px; /* Скругленные углы */
}

Эти стили можно добавлять в общий CSS-файл проекта.

Заключение

Интеграция BasicLightbox в приложение на React — это простой и эффективный способ добавить модальные окна. Основное внимание следует уделить правильному управлению состоянием и обработке событий закрытия окна, чтобы создать удобный и функциональный интерфейс.

Оглавление