npm i react-ui-xmodal

1
2import { xmodal } from 'react-ui-xmodal';
3import 'react-ui-xmodal/dist/react-ui-xmodal.css';    
4
5const App = () => {
6
7    const showToast = (pos: 'top' | 'center' | 'bottom' = 'center') => {
8        xmodal.showToast({
9            msg: 'This is a toast message.',
10            duration: 1,
11            pos,
12        });
13    };
14
15    const makeContentElem = () => {
16        const elem = document.createElement('div');
17        elem.innerText = 'div 앨리먼트로 입력한 본문 입니다.';
18        elem.className = 'user-class';
19        elem.style.width = '500px';
20        elem.style.height = '400px';
21        return elem;
22    };
23    const showDialog = () => {
24        xmodal.showDialog({
25            title: '사용자 알림 창',
26            content: makeContentElem(),
27            buttonList: [
28                {
29                    text: 'cancel',
30                    func: () => {
31                        console.log('cancel');
32                        xmodal.hideDialog();
33                    },
34                },
35                {
36                    text: 'ok',
37                    func: () => {
38                        console.log('ok');
39                        xmodal.hideDialog();
40                    },
41                    default: true,
42                },
43            ],
44            onloadFunc: () => {
45                console.log('onload function');
46            },
47        });
48    };
49    const showDialog2 = () => {
50        xmodal.showDialog({
51            content:
52                '단순한 알림만 보여줍니다.|버튼이 없는 창 입니다.|창 외부를 클릭하거나 ESC 를 누르면 닫힙니다.',
53            overlayClose: true,
54            escClose: true,
55        });
56    };
57    const showDialog3 = () => {
58        xmodal.showDialog({
59            content:
60                '단순한 알림만 보여줍니다.|아래 닫힘 버튼을 누르면 닫힙니다.',
61            buttonList: [
62                {
63                    text: '닫힘',
64                    func: () => {
65                        xmodal.hideDialog();
66                    },
67                    default: true,
68                },
69            ],
70        });
71    };
72
73    return (
74        <div className="content-container">
75            <button
76                onClick={() => showToast('top')}
77            >
78                toast message (top)
79            </button>
80            <button
81                onClick={() => showToast('center')}
82            >
83                toast message (center)
84            </button>
85            <button
86                onClick={() => showToast('bottom')}
87            >
88                toast message (bottom)
89            </button>
90            <button
91                onClick={() => showDialog()}
92            >
93                dialog
94            </button>
95            <button
96                onClick={() => showDialog3()}
97            >
98                dialog (no title)
99            </button>
100            <button
101                onClick={() => showDialog2()}
102            >
103                dialog (no title, no foot)
104            </button>
105        </div>
106    );    
107};
108
109export default App;    
110