flymodal

A lightweight, imperative modal and toast library for React.
대화상자, 토스트 메세지를 컨트롤하는 가벼운 리액트용 모달 콤포넌트 입니다.

• Toast Message: A simple popup that appears briefly on the screen.
  (화면에 잠시 나타났다 사라지는 간단한 토스트 메시지입니다.)
• Dialog: A flexible dialog box that performs various actions based on user selection.
  (선택 버튼을 제공하여 다양한 작업을 수행하는 유연한 대화 상자입니다.)

Features

• Imperative API: Control modals and toasts easily with function calls without complex state management.
• Lightweight DOM Control: Optimized performance without unnecessary React re-renders.
• 리액트 상태나 랜더링에 관계없이 모달과 토스트 메세지를 컨트롤할 수 있습니다.

Demo

Check out the interactive demo here:

🔗 flymodal Demo

Installation

npm i flymodal

Quick Start

import flyModal from 'flymodal';
import 'flymodal/dist/flymodal.css';

function App() {
  const showToastMessage = () => {
    flyModal.showToast('This is a toast message.');
  };

  const showConfirmDialog = () => {
    flyModal.showDialog({
      title: 'Dialog Title',
      content: 'Dialog content | multi line support',
      buttonList: [
        {
          label: 'Cancel',
          onClick: () => {
            console.log('Cancel clicked');
            flyModal.closeDialog();
          },
        },
        {
          label: 'OK',
          onClick: () => {
            console.log('OK clicked');
            flyModal.closeDialog();
          },
          isDefault: true, // Highlights the button
        },
      ],
      // onShow: () => {
      //   console.log('Dialog is now displayed');
      // },
      // onClose: () => {
      //   console.log('Dialog is now closed');
      // },
      // escClose: false,
      // overlayClose: false,
    });
  };

  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <button onClick={showToastMessage}>Show Toast</button>
      <button onClick={showConfirmDialog}>Show Dialog</button>
    </div>
  );
}

export default App;

API Reference

1. flyModal.showToast(options)

Display a brief toast message.
화면에 잠시 나타났다 사라지는 간단한 메세지를 표시합니다.

flyModal.showToast(
  msg: string,
  options?: {
    duration?: number,
    pos?: 'top' | 'center' | 'bottom',
    offset?: string,
    onShow?: () => void,
    onClose?: () => void,
  }
)

• msg (string): Message content.
• options (optional)
  • duration (number, optional): Display duration in seconds (Default: 2).
  • pos (string, optional): Position on screen - 'top', 'center', or 'bottom' (Default: 'center').
  • offset (string | number, optional): Distance from the top or bottom edge when pos is set to 'top' or 'bottom'. Accepts valid CSS unit strings (e.g., '10px', '2rem') or numbers (automatically converted to px). (Default: '10%').
  • onShow (() => void, optional): Callback function executed right after the toast message is displayed.
  • onClose (() => void, optional): Callback function executed right after the toast message is closed.

2. flyModal.closeToast(callback)

Close the currently displayed toast message.
(Since toast messages close automatically after a specified time, it is not necessary to call closeToast.)
토스트 메세지를 닫습니다. (지정된 시간 후 자동으로 닫히므로 꼭 필요하지는 않습니다.)

flyModal.closeToast(callback?: () => void);

• callback (() => void, optional): Callback function executed right after the toast message is closed.

3. flyModal.showDialog(options)

Display an interactive dialog box.
대화상자를 표시합니다.

flyModal.showDialog(
  {
    title?: string,
    content: string | HTMLElement,
    buttonList?: Array<{
      label: string,
      onClick: () => void,
      isDefault?: boolean,
    }>,
    xClose?: boolean;
    escClose?: boolean,
    overlayClose?: boolean,
    onShow?: () => void,
    onClose?: () => void,
  }
);

• title (string, optional): Dialog title text.
• content (string | HTMLElement): Dialog body content.
• buttonList (Array, optional): List of action buttons.
  • label (string): Button label.
  • onClick (() => void): Click event handler.
  • isDefault (boolean, optional): Highlights the button with a primary color when set to true.

• xClose (boolean, optional): Generates a close button (X) on the right side of the title bar. Only active when title is provided. (Default: false).

• escClose (boolean, optional): Close dialog when pressing the Esc key (Default: false).
• overlayClose (boolean, optional): Close dialog when clicking outside the modal box (Default: false).
• onShow (() => void, optional): Callback function executed right after the dialog is displayed.
• onClose (() => void, optional): Callback function executed right after the dialog is closed.

4. flyModal.closeDialog(callback)

Close the currently displayed dialog.
대화상자를 닫습니다.

flyModal.closeDialog(callback?: () => void);

• callback (() => void, optional): Callback function executed right after the dialog is closed.

Stylesheet

Import the CSS file once in your entry point or component:

import 'flymodal/dist/flymodal.css';

License

MIT © Free to use. (No liability assumed.)