Modals

Modals provide a means to render content in front of everything else on a page.

The modal module in BBUI exposes two separate components to provide this functionality; a Modal component to control visibility of content, and a ModalContent component to quickly construct the typical content - although this is optional.

One of the common problems with modals and popups is stale state reappearing after hiding and showing the content again, since the state hasn't been garbage collected if a component controls its own visibility. This is handled for you when using the Modal component as it will fully unmount child components, properly resetting state every time it appears.

Use ModalContent to render typical modal content.

Are you sure you want to delete this record?

Width can be specified as a prop to a Modal. Any additional ModalContent props provided will be passed to the confirmation button.

Are you sure you want to do that?

Any content can be rendered inside a Modal. Use context to close the modal from your own components.

Async functions passed in as the onConfirm prop will make the modal wait until the callback is completed.

Pressing submit will wait 3 seconds before finishing and disable the confirm button until it's done.

Returning false from a onConfirm callback will prevent the modal being closed.