Thumbprint logo

Modal Base

A DEPRECATED modal without any styles

Deprecated

This package was deprecated in favor of `ModalCurtain` or `ModalV2`. Since this modal uses a deprecated library (that doesn't support React-19) we cannot support it in this documentation site.

Basic ModalBase

Modal with wrapper component

This example includes a wrapper component that opens the modal when the button is clicked on.

<div>
  <p>
    <b>
      DEPRECATED
    </b>
    : The documentation for this component is no longer supported on this documentation site.
  </p>
  <p>
    <b>
      Please use the modern equivalents:
    </b>
    <ul>
      <li>
        <a href="/components/modal-curtain/react/">
          ModalCurtain (v1)
        </a>
      </li>
      <li>
        <a href="/components/modal-v2/react/">
          ModalV2
        </a>
      </li>
    </ul>
  </p>
</div>

Props
ModalBase
We need to make sure we don't mount the DisplacedModalStructure (which uses portals) before
componentDidMount because it'll cause warnings (and actual bugs) with server-side rendering.
Pattern taken from react docs and solutions to issues:
https://reactjs.org/docs/react-dom.html#hydrate
https://github.com/facebook/react/issues/11169