backstage-modal
Backstage Modal React component
Installing
npm install backstage-modal --save
Components
<Modal />
Main component that includes the overlay, the modal window and its contents.
Use children
to render the inner content of the modal window.
Props
isOpen
: flag indicating wether the modal is opened or not (defaultfalse
);title
: title of the modal window;width
: CSS width of the modal window (default500px
);onCloseRequest
: callback called when the user attempts to close the modal:- by clicking on the close button;
- by clicking on the overlay;
- by pressing the ESC key.
<ModalBody />
Optional child component to wrap content and get some nice default styles.
<ModalFooter />
Optional child component to wrap content and get some nice default styles along with a separator.
Example
;;; { thisstate = isOpen: true ; } { this; } { return <Modal isOpen=thisstateisOpen title="Backstage Modal" onCloseRequest= thisonCloseRequest> <ModalBody> <p>Body</p> </ModalBody> <ModalFooter> <button type="button">OK</button> </ModalFooter> </Modal> ; } ReactDOM;