Modal

Windmill modals are completely accessible. As soon as you open it, you'll notice that the close button is already focused. This is because the focus is trapped inside the modal, so you can navigate with keyboard without the focus leaving the dialog.

Once it is closed, through a click or Esc key press, focus is restored to the element that opened the modal.

Also, notice that the layout is entirely changed when it is viewed on a small screen, to make it the most accessible it possibly can be to user's thumbs.

Import

import { Modal, ModalHeader, ModalBody, ModalFooter } from '@narimanb/wreactui'

Basics

A modal is composed of four components: a root Modal, ModalHeader, ModalBody and ModalFooter that receives two properties.

Code

import React, { useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@narimanb/wreactui'

function ModalPage() {

  const [isModalOpen, setIsModalOpen] = useState(false)

  function openModal() {
    setIsModalOpen(true)
  }

  function closeModal() {
    setIsModalOpen(false)
  }

  return (
    <>
      <div>
        <Button onClick={openModal}>Open modal</Button>
      </div>
      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <ModalHeader>Modal header</ModalHeader>
        <ModalBody>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum et eligendi repudiandae
          voluptatem tempore!
        </ModalBody>
        <ModalFooter>
          <Button className="w-full sm:w-auto" layout="outline" onClick={closeModal}>
            Cancel
          </Button>
          <Button className="w-full sm:w-auto">Accept</Button>
        </ModalFooter>
      </Modal>
    </>
  )
}

export default ModalPage

Props overview

Prop	Description	Type	Default
isOpen	define if the modal is open	boolean	false
onClose	function to handle modal closing	function