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