Symbol

Overview

@shinyongjun/react-dialog는 비동기 Dialogbox UI를 제공하는 React 컴포넌트 라이브러리 입니다.

예제 코드

DialogProvider 컴포넌트를 사용하여 최상위 컴포넌트를 감싸줍니다.
import { DialogProvider } from '@shinyongjun/react-dialog'; import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import '@shinyongjun/react-dialog/css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <DialogProvider> <App /> </DialogProvider> </React.StrictMode> );
CSS로 원하는 애니메이션을 추가해야 합니다.
import React from 'react'; import { useDialog } from '@shinyongjun/react-dialog'; export default function App() { const { alert } = useDialog(); const onAlertClick = async () => { await alert('are you sure?'); console.log('closed alert'); }; return ( <div> <button type="button" onClick={alert}> Open to Alert Dialog </button> </div> ); }