dev
전체 보기
javascript
server
pages-keywords dev
react 용 modal 콤포넌트 (ts) - flymodal

flymodal

* react 용 modal 콤포넌트 (typescript)

- 토스트메세지 띄우기

- 대화상자 띄우기


* DEMO

https://disketch-apps.pages.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('This is a toast message.' + pos, {
  3.         duration: 1,
  4.         pos,
  5.     });
  6. };


* 다이얼로그 띄우기

  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. };



스크린샷 2026-08-04 오후 9.5


react
modal
dialog
toast
toast message
popup
npm
08.13 00:06118
댓글 (0)
등록된 댓글이 없습니다.