Modal

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

bash

npm i @anakin-gbit/modal

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}
        title="Modal content"
      >
        <p>Content here.</p>
        <form>
          <button type="submit">Submit</button>
        </form>
      </Modal>
    </>
  )
}

export { ModalButtonExample }