Notifications provide information about status changes, errors, or other important information that requires user attention.
import { ToastNotification, NotificationButton, NotificationActionButton, NotificationTextDetails } from "@wfp/react"
To display custom footer content, pass a function (or React component) to modalFooter
prop
<Modal open modalFooter={() => <div>The Modal Footer content</div>} />
Dialog
example)Full screen dialogs only show the Modal element without any other content like the navigation. They can be used for login, password reset or very important dialogs.
<Modal open hideClose backgroundImage={yourBackgroundImage.jpg} />
open
stateModal allows you to control the open
State on your own. Use the Modal Wrapper component to use a controlled version of Modal.
() => { const [open, setOpen] = useState(); submitAndClose = () => { alert("Submit now and close the modal"); setOpen(false); }; return ( <div> <button onClick={() => setOpen(!open)}> Open Modal </button> <Modal open={open} primaryButtonText="Submit" onRequestSubmit={this.submitAndClose} secondaryButtonText="Cancel Modal" onSecondarySubmit={this.toggleModal} onRequestClose={this.toggleModal} > <p className="wfp--modal-content__text"> Nothing to see here </p> </Modal> </div> ); };
onRequestClose={(evt, trigger) => {if (trigger !== 'background') {return props.onClose(evt, trigger);}return null;}}<ModalonRequestClose={this.onRequestClose}{...otherProps}/>