1.4.6 • Published 3 years ago
React Modal
| props | type | 설명 |
|---|
| message | string | 모달의 메시지 입니다. |
| closingButtonText | string | 닫는 버튼의 텍스트 입니다. |
| onClose | function | 닫는 버튼의 로직이 들어갑니다. |
| handleButtonText | string | 삭제, 로그아웃 등 어떤 특정한 일을 하는 버튼의 텍스트입니다. |
| onHandle | function | 어떤 특정한 일을 수행하는 로직이 들어갑니다. |
| props | type | description |
|---|
| message | string | A modal message is entered. |
| closingButtonText | string | The text of the close button. |
| onClose | function | The logic of the closing button enters. |
| handleButtonText | string | The text of the button that does some specific thing, such as delete, logout, etc. |
| onHandle | function | Logic goes in to do some specific thing. |
example
import React, { useState } from 'react';
import { Modal } from '@kiwook/modal'
const App = () => {
const [isOpenModal, setIsOpenModal] = useState(false)
const openModal = () => {
setIsOpenModal(true)
}
const onCloseModal = () => {
setIsOpenModal(false)
}
return (
<div className="App">
<button onClick={openModal}>
Toggle Button
</button>
{isOpenModal && (
<Modal
message="This is Modal."
closingButtonText="close"
onClose={onCloseModal}
/>
)}
</div>
);
}
export default App;