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:

import Modal, { ModalActions, ModalContent,  ModalTitle } from 'p14-plugin-modal/dist'

Create your state in your component:

const [myModal, setMyModal] = useState(false)

Render your alert in your component:

    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