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

Featherlight — это легковесная библиотека для создания модальных окон на чистом JavaScript и jQuery. Несмотря на то, что React использует собственную систему рендеринга компонентов, Featherlight можно интегрировать, используя прямое обращение к DOM через useEffect и ссылки (ref).

Подключение включает следующие шаги:

  1. Установка зависимостей:
npm install jquery featherlight
  1. Импорт в компонент React:
import $ from 'jquery';
import 'featherlight';
import 'featherlight/dist/featherlight.min.css';
  1. Создание ссылки на DOM-элемент для открытия модального окна:
import { useRef, useEffect } from 'react';

function ModalExample() {
    const modalRef = useRef(null);

    useEffect(() => {
        if (modalRef.current) {
            $(modalRef.current).featherlight({
                // Настройки можно задать здесь
            });
        }
    }, []);

    return (
        <button ref={modalRef}>Открыть модальное окно</button>
    );
}

Использование ref позволяет Featherlight работать с конкретным элементом, избегая конфликтов с виртуальным DOM React.

Настройка и опции Featherlight

Featherlight предоставляет обширный набор опций, которые позволяют управлять внешним видом, поведением и анимацией модальных окон:

  • target — элемент или селектор, который будет загружен в модальное окно. Можно передавать HTML, jQuery-объект или URL.
  • closeIcon — HTML-строка, определяющая иконку закрытия окна.
  • closeOnClick — определяет, закрывается ли окно при клике вне него (true по умолчанию).
  • closeOnEsc — закрытие по клавише Esc.
  • persist — если true, модальное окно сохраняется в DOM между открытиями, что полезно для динамического контента.
  • afterOpen / afterClose — функции обратного вызова для выполнения действий после открытия или закрытия.

Пример конфигурации:

$(modalRef.current).featherlight({
    target: '#myContent',
    closeIcon: '&#10005;',
    closeOnClick: 'background',
    afterOpen: function() {
        console.log('Модальное окно открыто');
    }
});

Встраивание динамического контента

Featherlight хорошо работает с динамическим контентом, что важно для React-приложений, где состояние компонента может меняться.

  1. Использование JSX для содержимого окна:
const modalContent = (
    <div>
        <h2>Динамический заголовок</h2>
        <p>Содержимое формируется на основе состояния компонента.</p>
    </div>
);

function openModal() {
    $.featherlight(modalContent);
}
  1. Передача URL или селектора для AJAX-загрузки:
$.featherlight({
    ajax: '/api/modal-content',
    loading: 'Загрузка...'
});

Это позволяет интегрировать модальные окна с серверным контентом без перезагрузки страницы.

Управление состоянием React и Featherlight

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

import { useState, useRef, useEffect } from 'react';

function StatefulModal() {
    const [isOpen, setIsOpen] = useState(false);
    const modalRef = useRef(null);

    useEffect(() => {
        if (isOpen && modalRef.current) {
            $.featherlight(modalRef.current, {
                afterClose: () => setIsOpen(false)
            });
        }
    }, [isOpen]);

    return (
        <>
            <button onCl ick={() => setIsOpen(true)}>Открыть окно</button>
            <div ref={modalRef} style={{ display: 'none' }}>
                <h3>Состояние: {isOpen ? 'Открыто' : 'Закрыто'}</h3>
            </div>
        </>
    );
}

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

Анимации и стилизация

Featherlight позволяет легко настраивать анимации и стили через CSS и встроенные опции:

  • Open/Close анимации задаются через CSS-переходы. Можно использовать featherlight-open и featherlight-close классы для создания эффектов.
  • Темизация модального окна осуществляется через переопределение .featherlight и .featherlight-content в CSS.
  • Респонсивность обеспечивается за счёт гибких CSS-сеток, так как Featherlight автоматически центрирует окно и масштабирует содержимое.

Пример кастомного CSS:

.featherlight {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}

.featherlight-content {
    padding: 20px;
    max-width: 600px;
}

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

Featherlight можно применять для отображения форм, галерей изображений и интерактивного контента, встроенного в React-компоненты. Для этого важно:

  • Сохранять компоненты React в скрытых контейнерах и передавать их в featherlight.
  • Использовать afterOpen и afterClose для инициализации сторонних библиотек (например, слайдеров или графиков).
  • Учитывать удаление модального контента из DOM, если он не должен сохраняться между открытиями, чтобы не нарушать жизненный цикл компонентов React.

Примеры комплексного использования

  1. Форма с валидацией внутри модального окна:
function FormModal() {
    const modalRef = useRef(null);

    useEffect(() => {
        $(modalRef.current).featherlight({
            afterOpen: () => console.log('Форма готова к заполнению'),
            afterClose: () => console.log('Форма закрыта')
        });
    }, []);

    return (
        <div ref={modalRef} style={{ display: 'none' }}>
            <form>
                <input type="text" placeholder="Имя" required />
                <button type="submit">Отправить</button>
            </form>
        </div>
    );
}
  1. Галерея изображений с навигацией:
function GalleryModal({ images }) {
    const modalRef = useRef(null);

    useEffect(() => {
        $(modalRef.current).featherlight({
            afterOpen: function() {
                let index = 0;
                const content = this.$content;
                content.html(`<img src="${images[index]}" />`);
                content.on('click', () => {
                    index = (index + 1) % images.length;
                    content.find('img').attr('src', images[index]);
                });
            }
        });
    }, [images]);

    return <button ref={modalRef}>Открыть галерею</button>;
}

Эти примеры демонстрируют, как Featherlight позволяет создавать сложные интерактивные модальные окна в React, сочетая удобство jQuery и гибкость компонентов React.

Оглавление