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

Tingle.js — это легковесная и простая в использовании библиотека для создания модальных окон. Она предоставляет гибкость в настройках и анимациях, а её интеграция с React может существенно повысить удобство работы с модальными окнами в веб-приложениях. В этой статье рассматриваются основные моменты использования Tingle.js в контексте React.

Установка и подключение

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

npm install tingle.js

Или с использованием yarn:

yarn add tingle.js

После установки необходимо импортировать саму библиотеку в компоненты React. Обычно это делается в файле компонента, где будет использоваться модальное окно:

import Tingle from 'tingle.js';
import 'tingle.js/dist/tingle.min.css';

Необходимо помнить, что для корректной работы стилей обязательно нужно подключить CSS-файл, так как модальные окна не будут отображаться должным образом без этого.

Создание компонента для модального окна

Модальные окна в React с использованием Tingle.js можно создавать с нуля, или использовать функциональные компоненты с хуками, чтобы управлять состоянием окна.

Пример компонента, который использует Tingle.js для создания модального окна:

import React, { useEffect, useState } from 'react';
import Tingle from 'tingle.js';
import 'tingle.js/dist/tingle.min.css';

const Modal = ({ isOpen, onClose }) => {
  const [modal, setModal] = useState(null);

  useEffect(() => {
    if (isOpen && !modal) {
      const newModal = new Tingle();
      newModal.setContent('<h1>Модальное окно</h1><p>Это пример модального окна с использованием Tingle.js</p>');
      newModal.open();
      newModal.on('close', onClose);

      setModal(newModal);
    }

    return () => {
      if (modal) {
        modal.destroy();
      }
    };
  }, [isOpen, modal, onClose]);

  return null;
};

export default Modal;

В данном примере:

  • Используется хук useState для хранения экземпляра модального окна.
  • Хук useEffect позволяет создать модальное окно, когда isOpen становится истинным, и уничтожить его, когда компонент размонтируется или окно закрывается.
  • Вызов modal.setContent добавляет HTML-содержимое в модальное окно, а метод open() открывает его на экране.

Управление состоянием модального окна

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

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

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleModalClose = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onCl ick={() => setIsModalOpen(true)}>Открыть модальное окно</button>
      <Modal isOpen={isModalOpen} onCl ose={handleModalClose} />
    </div>
  );
};

export default App;

Здесь:

  • setIsModalOpen(true) открывает модальное окно, изменяя состояние isModalOpen.
  • Компонент Modal получает это состояние в виде пропса и управляет его отображением.

Работа с параметрами модального окна

Tingle.js предоставляет разнообразные настройки, которые можно использовать для управления поведением и внешним видом модального окна. Например, можно настроить возможность закрытия окна при клике вне его области или при нажатии на кнопку закрытия.

Для настройки этих параметров используется метод setOptions. Пример:

const newModal = new Tingle();
newModal.setOptions({
  closeLabel: 'Закрыть', // текст кнопки закрытия
  closeMethods: ['overlay', 'button'], // варианты для закрытия: клик по оверлею или по кнопке
  sticky: true, // закрепить модальное окно на экране (не позволяет прокручивать страницу)
  onClose: onClose
});

В данном примере:

  • closeLabel задаёт текст кнопки закрытия.
  • closeMethods позволяет выбрать методы закрытия окна.
  • sticky фиксирует окно на экране, предотвращая прокрутку.

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

Tingle.js поддерживает кастомизацию анимаций для открытия и закрытия модальных окон. Эти анимации можно настраивать через параметры библиотеки. Например, можно добавить анимацию плавного появления:

const newModal = new Tingle();
newModal.setOptions({
  animation: 'fade', // анимация появления
  overlay: true // наличие затемнения фона
});

Можно также использовать собственные CSS-стили для модального окна, добавив классы через метод setClassNames. Пример:

newModal.setClassNames({
  modal: 'my-custom-modal-class',
  closeButton: 'my-custom-close-button-class'
});

Здесь задаются пользовательские классы для модального окна и кнопки закрытия, что позволяет применять к ним собственные стили.

Заключение

Использование Tingle.js в React позволяет создавать простые и гибкие модальные окна с минимальными усилиями. Интеграция с React основывается на использовании состояний и хуков для управления видимостью окон, а сама библиотека предлагает удобные методы для кастомизации анимаций, стилей и поведения. Учитывая небольшие размеры библиотеки и её простоту в использовании, Tingle.js является отличным выбором для интеграции в проекты на React, где требуется отображение модальных окон.

Оглавление