react-dialog 는 React 기반의 웹 애플리케이션에서 Custom Dialogbox를 쉽게 사용할 수 있도록 도와주는 라이브러리 입니다.
npm을 사용하여 설치할 수 있습니다.
npm install @shinyongjun/react-dialog
또는 yarn을 사용할 수도 있습니다.
yarn add @shinyongjun/react-dialog
라이브러리의 간단한 사용 예제 코드입니다.
import { DialogProvider } from '@shinyongjun/react-dialog';
import * as React from 'react';
import * as 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>
);
import * as React from 'react';
import { useDialog } from '@shinyongjun/react-dialog';
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>
);
}
export default App;