payments-modal-component

React Modal Component Library

A customizable, accessible modal component library for React applications, supporting common modal types including alert, confirm, prompt, and custom modals. Built with accessibility in mind, keyboard focus is automatically trapped within open modals, and the Escape key closes the modal.

✨ Features

• ✅ Prebuilt modal types: Alert, Confirm, Prompt, Custom
• ✅ Keyboard accessibility with Escape to close and focus trap
• ✅ Customizable size and position (small, medium, large, etc.)
• ✅ Easily styled with Emotion
• ✅ Fully typed with TypeScript

🚀 Usage

Basic Example

import Modal from '@your-org/payments-modal-component';

<Modal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  type='confirm'
  title='Delete Item'
  message='Are you sure you want to delete this item?'
  onConfirm={() => handleDelete()}
/>;

Modal Types

1. Alert Modal

<Modal isOpen={true} onClose={handleClose} type='alert' message='This is an alert message!' />

2. Confirm Modal

<Modal isOpen={true} onClose={handleClose} onConfirm={handleConfirm} type='confirm' message='Are you sure?' />

3. Prompt Modal

<Modal isOpen={true} onClose={handleClose} onSubmit={(input) => console.log(input)} type='prompt' />

4. Custom Modal

<Modal isOpen={true} onClose={handleClose} type='custom'>
  <div>Custom modal content goes here</div>
</Modal>

Props

Prop	Type	Description	Required	Default
isOpen	boolean	Whether the modal is open	No	false
onClose	() => void	Called when modal is closed	Yes	–
type	'alert' | 'confirm' | 'prompt' | 'custom'	Type of modal to render	No	'custom'
title	string	Title displayed at the top of the modal	No	''
message	string	Message for alert or confirm modals	No	''
onConfirm	() => void	Required if type="confirm"	Conditional	–
onSubmit	(value: string) => void	Required if type="prompt"	Conditional	–
children	React.ReactNode	Custom content, used in type="custom"	No	null
size	'small' | 'medium' | 'large'	Modal size	No	'medium'
position	'top' | 'center' | 'bottom'	Modal position on screen	No	'center'

Accessibility

• Focus trap inside modal using Tab / Shift+Tab
• Closes with Escape key
• Buttons and inputs are keyboard-focusable

📦 Installation

npm install your-modal-library-name
# or
yarn add your-modal-library-name