Modals

There is currently a hook called useModal that we use to open modals in many places. This hook has been deprecated. There is also a function named openModal in LayerConext that has been deprecated. Please don't continue to use either of these approaches. Instead, use the Modal component in the Nautilus Component Library and described in this article.

Storybook Docs can be found here
Bootstrap Docs can be found here

Introduction

We have a Modal component in the Nautilus Component Library that is built on top of the Bootstrap Modal component. You can reference the Bootstrap documentation on Modals for any details on how the modal works and the options available, as well as our Nautilus Storybook documentation for the Modal component.

Toggling Modal Display

The IsHiddenState prop is used to control whether or not the modal is hidden or not. You can pass in a react state that is returned directly from the useState hook.

Modal Content

There are three props that are used to set the content of the Modal, Header, Body, and Footer. The props for each of these are union types. One type in the union allows you to pass in custom JSX to display whatever you want in that section of the modal. The other is a simple type that has a small number of properties to support common usage.

When custom JSX is passed to any section, it will be wrapped in a div with that section's corresponding bootstrap class (i.e: modal-header, modal-body, modal-footer) to enforce modal styling.

Toggle between modals

Bootstrap only supports displaying one modal at a time so you cannot stack them. You can see bootstrap docs here for details on a clever way for toggling between modals when needed by setting the data-bs-toggle and data-bs-toggle attributes on buttons in each modal. 

In the Nautilus UI modal, footer buttons have a prop named altModalToShowOnClickElementId that will set both data attributes accordingly and open the modal with the specified modal element id when the button is cliicked.