Modal

A dialog component that appears in front of the main content to provide critical information or ask for user input.

Usage

import { Modal } from '@blendx-ui';

// Basic usage
function ModalExample() {
  const [show, setShow] = useState(false);
  
  return (
    <>
      <Button onClick={() => setShow(true)}>Open Modal</Button>
      
      <Modal 
        show={show} 
        onHide={() => setShow(false)}
        title="Modal Title"
      >
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Modal content goes here...
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={handleSave}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Props

Prop	Type	Required	Default	Description
show	boolean	Yes	-	Whether the modal is visible
onHide	function	Yes	-	Callback when modal is hidden
title	string	No	-	Title for the modal (alternative to using Modal.Title)
size	string	No	'md'	Size of the modal ('sm', 'md', 'lg', 'xl')
centered	boolean	No	false	Whether to center the modal vertically
backdrop	boolean or 'static'	No	true	Whether to show backdrop ('static' prevents closing on backdrop click)
animation	boolean	No	true	Whether to animate when showing/hiding
scrollable	boolean	No	false	Whether the modal body can scroll
dialogClassName	string	No	-	Custom class for the modal dialog
contentClassName	string	No	-	Custom class for the modal content
backdropClassName	string	No	-	Custom class for the modal backdrop
keyboard	boolean	No	true	Whether pressing escape closes the modal
fullscreen	boolean or string	No	false	Whether modal takes up the full screen ('sm-down', 'md-down', etc. for responsive)
enforceFocus	boolean	No	true	Whether to enforce focus in the modal
restoreFocus	boolean	No	true	Whether to restore focus after closing
autoFocus	boolean	No	true	Whether to auto-focus when modal opens
children	node	No	-	Modal content

Parameters

onHide

• Parameters: () - No parameters
• Returns: void

onShow

• Parameters: () - No parameters
• Returns: void

onEntered

• Parameters: () - No parameters
• Returns: void

onExit

• Parameters: () - No parameters
• Returns: void

Return Value

Returns a modal component with the following subcomponents:

• Modal.Header - Contains the modal header content
• Modal.Title - Modal title that can be used inside Header
• Modal.Body - Contains the main modal content
• Modal.Footer - Contains the modal footer (typically action buttons)
• Modal.Dialog - The modal dialog wrapper (rarely used directly)

Examples

Basic Modal

const [show, setShow] = useState(false);

<>
  <Button onClick={() => setShow(true)}>Open Modal</Button>
  
  <Modal show={show} onHide={() => setShow(false)}>
    <Modal.Header closeButton>
      <Modal.Title>Modal Title</Modal.Title>
    </Modal.Header>
    <Modal.Body>This is the modal content.</Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={() => setShow(false)}>
        Close
      </Button>
      <Button variant="primary" onClick={handleSave}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>
</>

Static Backdrop Modal

<Modal
  show={show}
  onHide={handleClose}
  backdrop="static"
  keyboard={false}
>
  <Modal.Header closeButton>
    <Modal.Title>Cannot Close By Backdrop</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    You can only close this by clicking the Close button.
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
      Close
    </Button>
  </Modal.Footer>
</Modal>

Centered Modal

<Modal
  show={show}
  onHide={handleClose}
  centered
>
  <Modal.Header closeButton>
    <Modal.Title>Centered Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>This modal is vertically centered.</Modal.Body>
  <Modal.Footer>
    <Button onClick={handleClose}>Close</Button>
  </Modal.Footer>
</Modal>

Scrollable Modal

<Modal
  show={show}
  onHide={handleClose}
  scrollable
>
  <Modal.Header closeButton>
    <Modal.Title>Scrollable Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {/* Long content that will make the modal scroll */}
    <p>...</p>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={handleClose}>Close</Button>
  </Modal.Footer>
</Modal>

Fullscreen Modal

<Modal
  show={show}
  onHide={handleClose}
  fullscreen
>
  <Modal.Header closeButton>
    <Modal.Title>Fullscreen Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>This modal takes up the entire screen.</Modal.Body>
  <Modal.Footer>
    <Button onClick={handleClose}>Close</Button>
  </Modal.Footer>
</Modal>

Accessibility

• Sets proper ARIA attributes for dialog role
• Manages focus properly to ensure keyboard accessibility
• Supports keyboard navigation (Escape key closes the modal)
• Returns focus to the element that triggered the modal when closed
• Traps focus within the modal for better accessibility

Best Practices

• Always include a close button or method to dismiss the modal
• Keep modal content concise and focused on a single task
• Use appropriate modal sizes for the content
• For destructive actions, include confirmation or cancel options
• Consider using static backdrop for critical forms to prevent accidental dismissal
• Ensure all interactive elements within the modal are accessible

Related Components

• ModalDialog
• FullscreenModal
• StandardModal
• AlertModal
• MarketingModal
• Drawer
• Popover

Notes

• Based on React Bootstrap's Modal component
• For more complex modal patterns, consider the specialized modal components like AlertModal or FullscreenModal

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	10
frontend-app-dashboard	3
frontend-app-course-authoring	1
frontend-app-account	2

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/DocumentCard.jsx
• src/components/GetContactModal.jsx
• src/components/Support.jsx
• src/components/VideoCard.jsx
• src/pages/calendar/index.jsx
• src/pages/program-single/enrollment/EnrollDrawer.jsx
• src/pages/program-single/settings/DeleteProgramModal.jsx
• src/pages/users/index.jsx
• src/pages/users/teams/TeamSingle.jsx
• src/pages/users/teams/index.jsx

frontend-app-dashboard

• src/components/GetContactModal.jsx
• src/pages/calendar/index.jsx
• src/pages/support/actionModalSupport.jsx

frontend-app-course-authoring

• src/enrollments/EnrollDrawer.jsx

frontend-app-account

• src/account-settings/delete-account/ConfirmationModal.jsx
• src/account-settings/delete-account/SuccessModal.jsx