@devseed-ui/modal

@devseed-ui/modal

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

Example

state: {revealed: false}
---
<DevseedUiThemeProvider>
  <CollecticonsGlobalStyle />
  <Button variation="primary-raised-dark" 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>

Code Sample

<div>
  <iframe
    src="https://codesandbox.io/embed/modal-sample-ktqel?fontsize=14&hidenavigation=1&theme=dark"
    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
    title="modal-sample"
    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
    sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  ></iframe>
</div>

Properties

rows:
  - Prop name: "id"
    Type: "string"
    Description: "An id for the modal"
    Default value: "n/a"
  - Prop name: "size"
    Type: "oneOf ['small', 'medium', 'large', 'xlarge', 'full']"
    Description: "Sets the size of the modal"
    Default value: "medium"
  - Prop name: "revealed"
    Type: "bool"
    Description: "Whether or not the modal is visible"
    Default value: "false"
  - Prop name: "className"
    Type: "string"
    Description: "Classes for the modal wrapper"
    Default value: "none"
  - Prop name: "onOverlayClick"
    Type: "function"
    Description: "Callback function for overlay click"
    Default value: "none"
  - Prop name: "onCloseClick"
    Type: "function"
    Description: "Callback function for close button click"
    Default value: "none"
  - Prop name: "closeButton"
    Type: "bool"
    Description: "Whether or not the modal should render the default close button"
    Default value: "true"
  - Prop name: "title"
    Type: "string"
    Description: "Title for the modal. Required unless the header is being overridden"
    Default value: "none"

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>}
/>