Component <MainModal />

Props

Props	Type	Meaning	Possible values
verticalPosition	string	Change modal vertical position on the screen	top / center
shape	string	Change modal corners radius	rounded / squared
maxWidth	string / number	Change modal max width	from 0 to any number or string with units
fullWidth	boolean	Set modal width to full width but limited by maxWidth prop	true / false
header	node	Add modal header section	element
footer	node	Add modal footer section	element
hideCloseActions	boolean	Remove ability to close the modal by x-mark or bg clicks	true / false
isOpen	boolean	Set modal status	true / false
handleClose	function	Actions, after modal x-mark was clicked	() => void

---

Positions

const MainModalPosition = ({ verticalPosition }) => {
  const [isModal, setModal] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setModal(true)}>
        Modal {verticalPosition}
      </button>

      <MainModal
        verticalPosition={verticalPosition}
        isOpen={isModal}
        handleClose={() => setModal(false)}
      >
        Hello my dear friend!
      </MainModal>
    </>
  )
}

---

Shape

const MainModalShape = ({ shape }) => {
  const [isModal, setModal] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setModal(true)}>
        Modal {shape}
      </button>

      <MainModal shape={shape} isOpen={isModal} handleClose={() => setModal(false)}>
        Hello my dear friend!
      </MainModal>
    </>
  )
}

---

Sizes

const MainModalSize = ({ maxWidth }) => {
  const [isModal, setModal] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setModal(true)}>
        {maxWidth}px width modal
      </button>

      <MainModal maxWidth={maxWidth} isOpen={isModal} handleClose={() => setModal(false)} fullWidth>
        Hello my dear friend!
      </MainModal>
    </>
  )
}

---

Header and Footer

const MainMoadlHeaderFooter = ({ header, footer }) => {
  const [isModal, setModal] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setModal(true)}>
        Header Modal
      </button>

      <MainModal
        header={header}
        footer={footer}
        isOpen={isModal}
        handleClose={() => setModal(false)}
      >
        Hello my dear friend!
      </MainModal>
    </>
  )
}

---

Closing actions control

const MainMoadlHeaderFooter = ({ hideActions }) => {
  const [isModal, setModal] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setModal(true)}>
        {hideActions ? 'With' : 'Without'} hide actions Modal
      </button>

      <MainModal isOpen={isModal} hideCloseActions={hideActions}>
        <button type="button" onClick={() => setModal(false)}>
          Close Modal
        </button>
      </MainModal>
    </>
  )
}