1
2import flyModal from 'flymodal';
3import 'flymodal/dist/flymodal.css';
4
5const App = () => {
6    const showToast = (pos: 'top' | 'center' | 'bottom' = 'center') => {
7        flyModal.showToast('This is a toast message.' + pos, {            
8            duration: 1,
9            pos,
10            onShow: () => {
11                console.log('showToast onShow');
12            },
13            onClose: () => {
14                console.log('showToast onClose');
15            },
16        });
17    };
18    const makeContentElem = () => {
19        const elem = document.createElement('div');
20        elem.innerText = 'html element (div)';
21        elem.className = 'user-class';
22        Object.assign(elem.style, {
23            padding: '12px',
24            borderRadius: '5px',
25            width: '500px',
26            height: '300px',
27            backgroundColor: '#f2f2f2',
28            border: '1px solid #d9d9d9',
29        });
30        return elem;
31    };
32    const showDialog = () => {
33        flyModal.showDialog({
34            title: 'dialog title',
35            content: makeContentElem(),
36            buttonList: [
37                {
38                    label: 'cancel',
39                    onClick: () => {
40                        console.log('cancel');
41                        flyModal.closeDialog();
42                    },
43                },
44                {
45                    label: 'ok',
46                    onClick: () => {
47                        console.log('ok');
48                        flyModal.closeDialog();
49                    },
50                    isDefault: true,
51                },
52            ],
53            onShow: () => {
54                console.log('onload function');
55            },
56            onClose: () => {
57                console.log('onClose function');
58            },
59            overlayClose: true,
60            escClose: true,
61        });
62    };
63    const showDialog2 = () => {
64        flyModal.showDialog({
65            content:
66                'Simple notifications.|Closes when you press the close button below.',
67            buttonList: [
68                {
69                    label: 'close',
70                    onClick: () => {
71                        flyModal.closeDialog();
72                    },
73                    isDefault: true,
74                },
75            ],
76        });
77    };
78    const showDialog3 = () => {
79        flyModal.showDialog({
80            content:
81                'Simple notifications.|without buttons.|Closes when you click outside the dialog or press ESC.',
82            overlayClose: true,
83            escClose: true,
84        });
85    };
86
87    return (
88        <>
89            <div className="content-container">
90                <button onClick={() => showToast('top')}>
91                    toast message (top)
92                </button>
93                <button onClick={() => showToast('center')}>
94                    toast message (center)
95                </button>
96                <button onClick={() => showToast('bottom')}>
97                    toast message (bottom)
98                </button>
99                <button onClick={showDialog}>dialog</button>
100                <button onClick={showDialog2}>dialog (no title)</button>
101                <button onClick={showDialog3}>
102                    dialog (no title, no foot)
103                </button>
104            </div>
105        </>
106    );
107};
108
109export default App;    
110

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.
• 리액트 상태나 랜더링에 관계없이 모달과 토스트 메세지를 컨트롤할 수 있습니다.

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';

Demo

Check out the interactive demo here:

🔗 flymodal Demo

License

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