react-danang v0.2.93

react-danang

설명

antd의 모달을 쉽고 편하게 사용하기 위해 제작 되었습니다.

Table of Contents

• Installation
• Usage

Installation (설치)

To install the library, you need to have react and react-dom and antd and tailwindcss already installed in your project. antd 와 tailwindcss 가 설치되어 있어야 합니다.

npm install antd tailwindcss react-danang

Usage (사용방법)

//Content for Modal. (모달 컨텐츠 정의)
interface ModalContentProps {
    modalData: any;
    onClose: any;
}

const ModalContent = ({modalData, onClose}: ModalContentProps) => {
    return (
        <div>
            <NoticesAlarmModal modalData={modalData} onClose={onClose}/>
        </div>
    );
};

export default ModalContent;

import {ComModal, useComModal} from "react-danang";

const App = () => {
    const [m] = useComModal();
    const openModal = () => {
        const params = {
            ...
        }

        ///Simply open the modal with content.
        m.open({
            //your modal content
            content: ModalContent,
            //antd modal props
            modalProps: {},
            //The data to be sent to modalData in the modal content
            modalData: params,
            //It is optional. If omitted, the modal will handle the closing internally. Use this when you need to receive a callback parameter during the onClose event or if you require control before closing the modal
            onClose: async () => {
            m.close();
            },
        });
    }
    return (
        <div>
            <button onClick={openModal}>open antd Modal</button>
            <ComModal {...m} />
        </div>
    )
}

export default App;