@devseed-ui/modal

@devseed-ui/modal

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

This component requires [collecticons](/collecticons) to be included.
You'll see strange characters (example �) in place of icons if collecticons is missing.

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="/logo.svg" alt="Development Seed meta" /></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

rows:
  - Prop name: "id"
    Type: "string"
    Description: "An id for the modal"
    Default value: "n/a"
  - Prop name: "className"
    Type: "string"
    Description: "Classes for the modal wrapper"
    Default value: "n/a"
  - Prop name: "revealed"
    Type: "bool"
    Description: "Whether or not the modal is visible"
    Default value: "false"
  - Prop name: "size"
    Type: "string"
    Description: "Size of the modal. One of small | medium | large | xlarge | full"
    Default value: "medium"
  - Prop name: "onOverlayClick"
    Type: "function"
    Description: "Callback function for overlay click"
    Default value: "n/a"
  - Prop name: "onCloseClick"
    Type: "function"
    Description: "Callback function for close button click"
    Default value: "n/a"
  - 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: "n/a"
  - Prop name: "content"
    Type: "node"
    Description: "Modal body content, rendered inside `ModalBody`. Required unless the body is being overridden"
    Default value: "n/a"
  - Prop name: "footerContent"
    Type: "node"
    Description: "Modal footer content, rendered inside `ModalFooter`"
    Default value: "n/a"
  - Prop name: "renderContents"
    Type: "function"
    Description: "Overrides the contents of the modal. Anything returned by this function is rendered inside `ModalContents`. See below for function signature"
    Default value: "n/a"
  - Prop name: "renderHeader"
    Type: "function"
    Description: "Overrides the modal header element. Anything returned by this function is rendered instead of `ModalHeader`"
    Default value: "n/a"
  - Prop name: "renderHeadline"
    Type: "function"
    Description: "Overrides the modal headline element. Anything returned by this function is rendered instead of `ModalHeadline`"
    Default value: "n/a"
  - Prop name: "renderToolbar"
    Type: "function"
    Description: "Overrides the modal toolbar element. Anything returned by this function is rendered instead of `ModalToolbar`"
    Default value: "n/a"
  - Prop name: "renderBody"
    Type: "function"
    Description: "Overrides the modal body element. Anything returned by this function is rendered instead of `ModalBody`"
    Default value: "n/a"
  - Prop name: "renderFooter"
    Type: "function"
    Description: "Overrides the modal footer element. Anything returned by this function is rendered instead of `ModalFooter`"
    Default value: "n/a"

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