Modal

The SDK exports two modal components:

Modal (legacy)
GlobalModal (introduced with stream-chat-react@

Modals are positioned using CSS rule position:fixed. The legacy Modal component is rendered deep in the component tree (for example as a child of Message component) what in Safari browser may lead to overlay being clipped to parent dimensions if one of the parents is positioned with position: relative. To avoid this visual bug, we recommend using GlobalModal that is rendered at the top of the SDK component tree and thus is not clipped.

By default, the SDK renders modals with Modal component. We can opt in to using GlobalModal by passing the GlobalModal to Channel component’s Modal prop:

import { GlobalModal } from "stream-chat-react";

const Component = () => <Channel Modal={GlobalModal}></Channel>;

Both modals accept the same props.

children

The children prop is used to render the modal content.

import { useCallback, useState } from "react";

const Component = ({ image }) => {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const closeModal = useCallback(() => {
    setModalIsOpen(false);
  }, []);

  return (
    <>
      <button onClick={() => setModalIsOpen(true)}>Open gallery</button>
      <Modal
        className="str-chat__image-modal"
        onClose={closeModal}
        open={modalIsOpen}
      >
        <ModalGallery images={[image]} index={0} />
      </Modal>
    </>
  );
};

open

Flag to determine whether the modal and its content is rendered.

Type	Default
`boolean`	`false`

className

Class attached to the modal overlay div with default class str-chat__modal.

Type
`string`

onClose

The onClose callback is expected to toggle the value of the prop open (internally set it to false or true and re-render Modal).

Type
`(event: ModalCloseEvent) => void`

Where ModalCloseEvent is defined as follows:

export type ModalCloseEvent =
  | KeyboardEvent
  | React.KeyboardEvent
  | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;

onCloseAttempt

Optional handler to intercept closing logic. Return false to prevent onClose execution. The onCloseAttempt recognizes the following possible sources of a close attempt:

overlay - click on overlay
button - click on close button
escape - pressing Escape key

By default, modals are closed upon interacting with all the above sources.

import type { ModalCloseSource, ModalProps } from "stream-chat-react";
import { Channel, GlobalModal } from "stream-chat-react";

// click on overlay will not result in closing the modal
const onCloseAttempt: (source: ModalCloseSource) => boolean = (source) =>
  source !== "overlay";

const GlobalModalWrapper = (props: ModalProps) => {
  return <GlobalModal {...props} onCloseAttempt={onCloseAttempt} />;
};

const Component = () => (
  <Channel Modal={GlobalModalWrapper}>{/*    children*/}</Channel>
);

Type
`(source: ModalCloseSource, event: ModalCloseEvent) => boolean`

WithDragAndDropUpload

Overview