Modal
A modal can be easily implemented directly on the page you'd like without the need for much logic. You only need to write the logic for the content that you would like to appear on the modal and pass it in as a prop. See example below:
For any dependencies see here.
Example:
First add the modalReducer to your store.
Then import ModalComponentDialog
and ButtonComponent
from /modal/containers/
Create the content you would like to appear in the modal and the button element:
let buttonContent = <button> Click me! </button>;
let modalContent = <div> This is the first modal! </div>;
Then simply create the comonent tags for the Modal and Button:
<ModalComponentDialog mid="001"
modalTitle="Title Goes Here"
modalContent={modalContent} />
<ButtonComponent content={buttonContent} mid="001"/>
Ensure that the mid
are unique and are paired together. If a different mid is set for the ButtonModal
then it will not toggle the ModalComponentDialog
.