Backdrop for modal

PHOTO EMBED

Mon May 30 2022 11:16:53 GMT+0000 (Coordinated Universal Time)

Saved by @happy_cutman #react.js #html

import styled from 'styled-components';
// backdrop
export const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000e1;
`

// для отключения скрола когда открыто окно
  useEffect(() => {
    document.body.style.overflow = isModalOpen ? "hidden" : "unset"
  }, [isProposalEditorOpen]);

// @ts-ignore
const Backdrop = ({children, onClick}) => {
  return (
    <Wrapper
      onClick={() => onClick()}
    >
      {children}
    </Wrapper>
  );
};

export default Backdrop;

// modal
const Modal = () => {
  return (
    <Wrapper
      onClick={(e) => e.stopPropagation()}
    >
    </Wrapper>
  );
};

export default Modal;

content_copyCOPY