Modal

@happeouikit/modals

yarn add @happeouikit/modals

Modal

ConfirmModal

Examples

Success ConfirmModal

Info ConfirmModal

Warn ConfirmModal

Alert ConfirmModal

Alert ConfirmModal with custom body

Modal with long text and header and custom css for the overlay

Modal with Close icon

Make sure to provide both close function and iconClose={true}

Modal with custom footer and no header

Customize modal with anything inside. Here's an example to have a custom footer.

Modal that closes when you click outside

If you provide the closeOnClickOutside prop, the modal will automatically close when you click outside of it.

Modal that only closes when you click on backdrop

If you provide the prop reactModalProps to Modal component:

// reactModalProps = {{
//   onRequestClose: () => {close();},
//   shouldCloseOnOverlayClick: true
// }}

The modal will automatically close when you click on backdrop of it. Top left of the screen there is a portal on which you can click and see that modal does not close

When closeOnClickOutside is usedModal that closes when you click on something that is not in modal root Top left of the screen there is a portal on which you can click and see that modal does close

// closeOnClickOutside
const closeOnClickOutside=true;