@leafygreen-ui/modal

Modal

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/modal

NPM

npm install @leafygreen-ui/modal

Example

import Modal from '@leafygreen-ui/modal';

function ExampleComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(curr => !curr)}>Open Modal</button>
      <Modal open={open} setOpen={setOpen}>
        Modal Content goes here.
      </Modal>
    </>
  );
}

Output HTML

<button>Open Modal</button>
<div aria-modal="true" role="dialog" tabindex="-1" class="leafygreen-ui-2e4yhj">
  <button
    tabindex="0"
    aria-disabled="false"
    aria-label="Close modal"
    class="leafygreen-ui-zndd6x"
  >
    <div class="leafygreen-ui-xhlipt">
      <svg
        class="leafygreen-ui-19fdo3o"
        height="20"
        width="20"
        viewBox="0 0 16 16"
        role="img"
      >
        <g
          id="X-Copy"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path
            d="M9,7 L13.5,7 L13.5,9 L9,9 L9,13.5 L7,13.5 L7,9 L2.5,9 L2.5,7 L7,7 L7,2.5 L9,2.5 L9,7 Z"
            id="Combined-Shape-Copy"
            fill="currentColor"
            transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
          ></path>
        </g>
      </svg>
    </div></button
  >Modal Content goes here.
</div>

Notes

It is HIGHLY encouraged that any children inside of Modal should refrain from using usePortal={false} because this can cause stacking context/z-indexing issues since the popover element will render relative to the parent rather than rendering in a React portal which is automatically appended to the Modal. By default any component that can use a React portal, like Tooltip or Select, will have usePortal set to true.

Properties

Prop	Type	Description	Default
open	boolean	Determines open state of Modal component	false
setOpen	function	Callback to set open state of Modal component. setOpen accepts a boolean value, which will determine the open state of Modal component.	() => {}
size	'small', 'default', 'large'	Determines Modal size.	'default'
shouldClose	function	Callback to determine whether or not Modal should close when user tries to close it.	() => true
children	node	Children that will be rendered inside <Modal /> component.
className	string	Style to be applied to the container's root node.
contentClassName	string	Style to be applied to the content div.
initialFocus	string	A selector string for the element to move focus to when the modal is opened. The first focusable element in the modal will receive focus by default.
darkMode	boolean	Determines if the component will appear in dark mode.	false
closeIconColor	'default', 'dark', 'light'	Determines the color of the close icon.	default

Using Clipboard.js inside Modal

To directly use the Clipboard.js library inside of Modal, rather than using the Copyable component, the reference value of the Modal should be used as the container when Clipboard.js is instantiated. You can get the reference value by consuming the usePopoverPortalContainer hook:

  const { portalContainer } = usePopoverPortalContainer();

  const clipboard = new ClipboardJS(buttonRef, {
    container: portalContainer,
  });