Хуки для React

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

Структура библиотеки

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

Хук useBasicLightbox

Хук useBasicLightbox является основным инструментом для работы с BasicLightbox в React. Он инкапсулирует создание и управление состоянием модального окна, скрывая от разработчика детали работы с библиотекой.

Пример использования:

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

function LightboxExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [lightbox, setLightbox] = useState(null);

  const openLightbox = (content) => {
    const instance = BasicLightbox.create(content);
    setLightbox(instance);
    instance.show();
    setIsOpen(true);
  };

  const closeLightbox = () => {
    if (lightbox) {
      lightbox.close();
      setIsOpen(false);
    }
  };

  return (
    <div>
      <button onCl ick={() => openLightbox('<img src="path/to/image.jpg" />')}>Открыть Lightbox</button>
      {isOpen && (
        <button onCl ick={closeLightbox}>Закрыть Lightbox</button>
      )}
    </div>
  );
}

В этом примере хук useState используется для управления состоянием модального окна. Метод BasicLightbox.create() создает модальное окно с переданным контентом, а метод instance.show() отображает его. При закрытии окна вызывается метод lightbox.close().

Хук useEffect для управления жизненным циклом

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

Пример с использованием useEffect:

import React, { useState, useEffect } from 'react';
import BasicLightbox from 'basiclightbox';

function LightboxWithAutoClose() {
  const [isOpen, setIsOpen] = useState(false);
  const [lightbox, setLightbox] = useState(null);

  useEffect(() => {
    if (isOpen && !lightbox) {
      const instance = BasicLightbox.create('<img src="path/to/image.jpg" />');
      setLightbox(instance);
      instance.show();
    }

    return () => {
      if (lightbox) {
        lightbox.close();
      }
    };
  }, [isOpen]);

  return (
    <div>
      <button onCl ick={() => setIsOpen(true)}>Открыть Lightbox</button>
      <button onCl ick={() => setIsOpen(false)}>Закрыть Lightbox</button>
    </div>
  );
}

Здесь хук useEffect следит за состоянием isOpen. Когда оно изменяется, хук автоматически создает и открывает модальное окно, если оно еще не было создано, и закрывает его при демонтировании компонента или изменении состояния.

Управление анимацией и эффектами

В BasicLightbox можно управлять анимациями и эффектами отображения модального окна. В React, можно использовать хуки для добавления анимаций, таких как плавное открытие или закрытие окна, с использованием библиотеки react-spring или других инструментов для анимаций.

Пример с анимацией:

import React, { useState, useEffect } from 'react';
import BasicLightbox from 'basiclightbox';
import { useSpring, animated } from 'react-spring';

function AnimatedLightbox() {
  const [isOpen, setIsOpen] = useState(false);
  const [lightbox, setLightbox] = useState(null);
  const props = useSpring({ opacity: isOpen ? 1 : 0 });

  useEffect(() => {
    if (isOpen && !lightbox) {
      const instance = BasicLightbox.create('<img src="path/to/image.jpg" />');
      setLightbox(instance);
      instance.show();
    }

    return () => {
      if (lightbox) {
        lightbox.close();
      }
    };
  }, [isOpen]);

  return (
    <div>
      <animated.button style={props} onCl ick={() => setIsOpen(true)}>Открыть Lightbox</animated.button>
      <button onCl ick={() => setIsOpen(false)}>Закрыть Lightbox</button>
    </div>
  );
}

Здесь используется хук useSpring для анимации кнопки, которая становится видимой или невидимой в зависимости от состояния isOpen.

Хуки для обработки событий

Работа с событиями, такими как клики, также может быть упростена с помощью хуков. Например, можно настроить хук для обработки кликов по области за пределами модального окна, чтобы автоматически его закрывать.

Пример с обработкой кликов:

import React, { useState, useEffect } from 'react';
import BasicLightbox from 'basiclightbox';

function ClickOutsideLightbox() {
  const [isOpen, setIsOpen] = useState(false);
  const [lightbox, setLightbox] = useState(null);

  const handleClickOutside = (event) => {
    if (lightbox && !lightbox.element.contains(event.target)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    if (isOpen && !lightbox) {
      const instance = BasicLightbox.create('<img src="path/to/image.jpg" />');
      setLightbox(instance);
      instance.show();
    }

    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
      if (lightbox) {
        lightbox.close();
      }
    };
  }, [isOpen]);

  return (
    <div>
      <button onCl ick={() => setIsOpen(true)}>Открыть Lightbox</button>
      {isOpen && <div>Модальное окно открыто!</div>}
    </div>
  );
}

В этом примере хук useEffect добавляет обработчик кликов по документу. Если пользователь кликает за пределами модального окна, оно автоматически закрывается.

Интеграция с контекстами

В React часто используется контекст для передачи состояния через компоненты. Это может быть полезно и для работы с BasicLightbox. Можно создать контекст для управления состоянием модальных окон и использовать его через хуки.

Пример с использованием контекста:

import React, { useState, useContext, useEffect } from 'react';
import BasicLightbox from 'basiclightbox';

const LightboxContext = React.createContext();

function LightboxProvider({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  const [lightbox, setLightbox] = useState(null);

  const openLightbox = (content) => {
    const instance = BasicLightbox.create(content);
    setLightbox(instance);
    instance.show();
    setIsOpen(true);
  };

  const closeLightbox = () => {
    if (lightbox) {
      lightbox.close();
      setIsOpen(false);
    }
  };

  return (
    <LightboxContext.Provider value={{ openLightbox, closeLightbox }}>
      {children}
    </LightboxContext.Provider>
  );
}

function LightboxButton() {
  const { openLightbox } = useContext(LightboxContext);
  return <button onCl ick={() => openLightbox('<img src="path/to/image.jpg" />')}>Открыть Lightbox</button>;
}

function App() {
  return (
    <LightboxProvider>
      <LightboxButton />
    </LightboxProvider>
  );
}

В этом примере создается контекст для управления состоянием модального окна. Хук useContext используется для доступа к функциям открытия и закрытия окна в любом компоненте.

Заключение

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