To implement Modal component into your project you’ll need to the import at least the Modal and the ModalSection:

import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";

After adding import into your project you can use it simply like:

<Modal>
  <ModalSection>Hello World!</ModalSection>
</Modal>

The Modal component has big variety of usage, please check examples for usage below.

Table below contains all types of the props available in the Modal component.

• To select the Close Button element for testing purposes, use [data-test=“ModalCloseButton”] selector.

• To type a reference you’re passing to a modal, use the following example:

  const modalRef = React.useRef<React.ElementRef<typeof Modal> | null>(null)

• You might want to get the current scroll position of a Modal component, which might change based on media queries. Reading it constantly would degrade performance. Instead, get it on demand by using the getScrollPosition method in a Modal instance like this:

  class Component extends React.Component {
    const modalRef = React.useRef<React.ElementRef<typeof Modal> | null>(null)
    const getScroll = () => {
      if (modalRef.current) {
        setLocalScrollPosition(modalRef.current.getScrollPosition());
      }
    };
    render() {
      return (
        <Modal ref={modalRef}>
          Some content.
        </Modal>
      );
    }
  }

• To set the scroll position of a Modal component, use the setScrollPosition method in a Modal instance like this:

  class Component extends React.Component {
    const modalRef = React.useRef<React.ElementRef<typeof Modal> | null>(null)
    setScroll = () => {
      if (modalRef.current) {
        modalRef.current.setScrollPosition(100);
      }
    };
    render() {
      return (
        <Modal ref={modalRef}>
          <ModalSection>Example usage of setting up the scrollTop position</ModalSection>
          <ModalFooter>
            <Button onClick={this.setScroll}>Change scrollTop</Button>
          </ModalFooter>
        </Modal>
      );
    }
  }

Modal component offers a good flexibility and many variations in its usage. There are three subcomponents which you might use.

import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";

<Modal>
  <ModalSection suppressed>Hello World!</ModalSection>
</Modal>

Table below contains all types of the props in the ModalSection component.

import Modal, { ModalHeader } from "@kiwicom/orbit-components/lib/Modal";

<Modal>
  <ModalHeader title="Orbit design system">Hello World!</ModalHeader>
</Modal>

Table below contains all types of the props in the ModalHeader component.

import Modal, { ModalFooter } from "@kiwicom/orbit-components/lib/Modal";
// and probably Button
import Button from "@kiwicom/orbit-components/lib/Button";

<Modal fixedFooter>
  <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
    <Button type="secondary" iconLeft={<ChevronBackward />}>
      Back
    </Button>
    <Button block>Continue to Payment</Button>
  </ModalFooter>
</Modal>

Table below contains all types of the props in the ModalFooter component.

• You can set up different flex attribute for every children, or use one for all. See flex property docs for more information.

Although this component offers good flexibility of usage, there are tiny limitations for usage.

If you need to wrap the children into custom component, wrap all of the children into one wrapper, e.g.:

// good
<Modal fixedFooter>
  <CustomWrapper>
    <ModalHeader />
      <ModalSection>
        My content
      </ModalSection>
      <ModalSection>
        My content
      </ModalSection>
    <ModalFooter />
  </CustomWrapper>
</Modal>
// bad, the CSS styles will be broken
<Modal fixedFooter>
  <ModalHeader />
  <CustomWrapper>
    <ModalSection>
      My content
    </ModalSection>
    <ModalSection>
      My content
    </ModalSection>
  </CustomWrapper>
  <ModalFooter />
</Modal>

• When Modal is closed return focus to the element that opened the modal. You can use onClose callback function to achieve this.