@devseed-ui/modal

Modal

Displays a modal component which is portaled to the body to ensure is appears over all other elements

Example

state: {revealed: false}
---
<DevseedUiThemeProvider>
  <button onClick={() => setState({revealed: true})}>Open modal</button>
  <Modal
    id="modal"
    size="small"
    revealed={state.revealed}
    onCloseClick={() => setState({revealed: false})}
    title="Hello I'm a modal"
    content={(
      <React.Fragment>
        <h1><img src="https://developmentseed.org/assets/graphics/layout/ds-logo-pos.svg" alt="Development Seed logotype" width="188" height="32" /></h1>
          <p>In the beginning the Universe was created.</p>
          <p>This has made a lot of people very angry and been widely regarded as a bad move.</p>
      </React.Fragment>
    )}
    footerContent={<small>https://developmentseed.org</small>}
  />
</DevseedUiThemeProvider>

Properties

id string An id for the modal

size string - default medium Modal size. One of "small", "medium", "large", "xlarge", "full"

revealed bool Whether or not the modal is visible

className string Classes for the modal wrapper

onOverlayClick function Callback function for overlay click

onCloseClick function Callback function for close button click

closeButton bool - default true Whether or not the modal should render the default close button

title string Title for the modal. Required unless the header is being overridden

content node Modal body content, rendered inside ModalBody. Required unless the body is being overridden

footerContent node Modal footer content, rendered inside ModalFooter

renderContents function Overrides the contents of the modal. Anything returned by this function is rendered inside ModalContents

renderHeader function Overrides the modal header element. Anything returned by this function is rendered instead of ModalHeader

renderHeadline function Overrides the modal headline element. Anything returned by this function is rendered instead of ModalHeadline

renderToolbar function Overrides the modal toolbar element. Anything returned by this function is rendered instead of ModalToolbar

renderBody function Overrides the modal body element. Anything returned by this function is rendered instead of ModalBody

renderFooter function Overrides the modal footer element. Anything returned by this function is rendered instead of ModalFooter

Note: All the render (render*) props have the signature fn(bag) => {}, where:

{object} bag Modal functions
  {function} bag.close Method to close the modal

Structure

If no overrides are applied, the modal structure is outlined below. It is listed with styled components and the corresponding html element in front.

<ModalWrapper>            // article
  <ModalContents>         // div
    <ModalHeader>         // header
      <ModalHeadline>     // div
        <h1></h1>           -- title prop
      </ModalHeadline>
      <ModalToolbar>      // div
        <CloseButton />     // button
      </ModalToolbar>
    </ModalHeader>
    <ModalBody />         // div -- content prop
    <ModalFooter />       // footer -- footerContent prop
  </ModalContents>
</ModalWrapper>

The ModalWrapper and ModalContents are required for positioning and styling purposes. All other elements can be replaced via render functions. The code that generates the structure above is:

<Modal
  id="modal"
  size="medium"
  revealed={revealed}
  onCloseClick={() => setRevealed(false)}
  title="This is the title"
  content={<p>This is the body</p>}
  footerContent={<p>This is the footer</p>}
/>