react 용 modal 콤포넌트 (ts) - flymodal

flymodal

 

* react 용 modal 콤포넌트 (typescript)

- 토스트메세지 띄우기

- 대화상자 띄우기

리액트 상태값, 랜더링 어쩌구 복잡한거 없이 그냥 함수 호출로 간단히 토스트, 다이얼로그 창 띄우기 좋다.

 

* DEMO

https://flyapps.dev/flymodal/

 

* npm 링크

https://www.npmjs.com/package/flymodal

 

 

* 설치

1. npm i flymodal

* 임포트

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

 

* 토스트 메세지 띄우기

1. const showToast = (pos: 'top' | 'center' | 'bottom' = 'center') => {
2.     flyModal.showToast({
3.         msg: 'This is a toast message.' + pos,
4.         duration: 1,
5.         pos,
6.     });
7. };

 

* 다이얼로그 띄우기

1. const showDialog = () => {
2.     flyModal.showDialog({
3.         title: 'dialog title',
4.         content: 'dialog content | multi line,
5.         buttonList: [
6.             {
7.                 label: 'cancel',
8.                 onClick: () => {
9.                     console.log('cancel');
10.                     flyModal.closeDialog();
11.                 },
12.             },
13.             {
14.                 label: 'ok',
15.                 onClick: () => {
16.                     console.log('ok');
17.                     flyModal.closeDialog();
18.                 },
19.                 isDefault: true,
20.             },
21.         ],
22.         // onShow: () => {
23.         //     console.log('onload function');
24.         // },
25.         // onClose: () => {
26.         //     console.log('onClose function');
27.         // },
28.         // overlayClose: true,
29.         // escClose: true,
30.     });
31. };