UNPKG

@aamal/p14-plugin-modale

Version:

The `p14-plugin-modal` as its name suggests, is a plugins developed as part of my OpenClassRooms training program. It is a React plugin allowing to display a modal alert, for more information go to the section "How the plugin works" ## Installation ```

47 lines (36 loc) 1.37 kB
# Getting Started The `p14-plugin-modal` as its name suggests, is a plugins developed as part of my OpenClassRooms training program. It is a React plugin allowing to display a modal alert, for more information go to the section "How the plugin works" ## Installation ``` $ npm install --save @aamal/p14-plugin-modale $ yarn add p14-plugin-modal ``` ### How the plugin works **Import module:** ```jsx import Modal, { ModalActions, ModalContent, ModalTitle } from 'p14-plugin-modal/dist' ``` **Create your state in your component:** ```jsx const [myModal, setMyModal] = useState(false) ``` **Render your alert in your component:** ```jsx return ( <> <Modal name="my-super-bright-alert" show={myModal} setShow={setMyModal}> <ModalTitle> Modal Title</ModalTitle> <ModalContent>*****Modal Message*****</ModalContent> <ModalActions> <button type="button" onClick={() =>setMyModal(false)}>Close Modal</button> </ModalActions> </Modal> </> ) ``` **`<Modal/>` params:** - name: *id* of your alert title use to define *Aria* - showClose: Boolean use to show or hide cross close button (`true` by default) - show: Boolean state use to show and hide your modal - setShow: function that updates your state