ModalRoot

Спецификация

В качестве children принимает коллекцию ModalPage и/или ModalCard. У каждого модального окна должен быть уникальный id.

Свойство activeModal переключает между модальными окнами.

• При смене значения свойства activeModal происходит плавный переход от одного модального окна к другому.
• При установке activeModal как null текущее модальное окно закрывается.

ModalRoot принимает свойство onClose, которое будет вызвано с идентификатором текущего активного модального окна или карточки после смахивания вниз или нажатия на крестик или нажатия на оверлей. Приложение должно установить в качестве нового значения activeModal либо идентификатор предыдущей модалки, либо null для скрытия. Каждой конкретной ModalPage или ModalCard можно передать свой обработчик onClose, если нужно переопределить поведение.

Также при использовании ModalRoot создаётся общий ModalOverlay для переданных компонентов, чтобы избегать моргания при переключении модальных окон.

FAQ

Создание обёрток для ModalPage / ModalCard

Вы можете создавать обертки для ModalPage / ModalCard, но нужно учитывать, что бизнес-логика должна либо вызываться внутри ModalPage / ModalCard, либо включаться в зависимости от контекста useModalRootContext(), т.к. ModalRoot лишь передаёт через контекст свойство activeModal, а ModalPage / ModalCard сравнивают его значение со своим id / nav – если совпадает, монтируются; иначе размонтируются.

const SomeAsyncEffect = () => {
  const [data, setData] = useState({});
  useEffect(function fetchData() {
    // Здесь логика, которая должна вызываться при показе окна
    fetch('...')
      .then((r) => r.json())
      .then(setData);
  }, []);
  return <div>{data}</div>;
};
 
const ModalPageWrapper = ({ id, ...restProps }) => {
  const { activeModal } = useModalRootContext();
 
  useEffect(
    function enableSomeEffect() {
      if (id === activeModal) {
        // Здесь логика, которая должна вызываться при показе окна
      }
    },
    [id, activeModal],
  );
 
  return (
    <ModalPage id={id} {...restProps}>
      <SomeAsyncEffect />
    </ModalPage>
  );
};
 
const App = () => {
  return (
    <ModalRoot activeModal="example-1">
      <ModalPageWrapper id="example-1" />
      {/* или */}
      <ModalPage id="example-2">
        <SomeAsyncEffect />
      </ModalPage>
    </ModalRoot>
  );
};

Отключение заднего фона у конкретного модального окна

Если вам необходимо отключить отображение фона для конкретной модалки в ModalRoot вы можете сделать так:

<ModalRoot activeModal={activeModal} disableModalOverlay={activeModal === 'modal-1'}>
  <ModalPage id="modal-1" />
  <ModalPage id="modal-2" />
</ModalRoot>

Свойства и методы