Modal

Layout component retrurns children in a Modal, and a dark overlay.

bash

npm i @anakin-gbit/modal

Example without constrained positioning

The Modal has position: fixed, which means it will be positioned relative to the viewport and not its parent element. However, if a translation is applied, such as transform: translateY(-5px), it creates a new stacking context. This causes the fixed-positioned modal to be positioned relative to the transformed parent instead of the viewport.

To avoid this, the modal uses React Portal to render itself outside of the DOM.

Code for the example button:

typescript

'use client'
import { Modal } from '@/components/Modal'
import React, { useState } from 'react'

const ModalButtonExample = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const handleOpenModal = () => setIsModalOpen(true)
  const handleCloseModal = () => setIsModalOpen(false)

  return (
    <>
      <button onClick={handleOpenModal} aria-label="Open Modal">
        Open the modal
      </button>

          <Modal
            isOpen={isModalOpen}
            onClose={handleCloseModal}
            overlayBackgroundColor="hsl(0, 0%, 0%, 0.8)"
            modalBackgroundColor="lightgreen"
            padding="15px"
            borderRadius="10px"
          >
            <Section theme="theme3">
              <h2>Modal Content</h2>
              <p>Content here.</p>
              <form>
                <button type="submit">Submit</button>
              </form>
            </Section>
          </Modal>
    </>
  )
}

export { ModalButtonExample }