react-simple-modal

Simple, performant and accessible React Modal component. Migration from jQuery Modal plugin to React.

🎯 Why this component?

• ⚡ Performance: Lightweight component (~5KB)
• ♿ Accessibility: ARIA support, focus and keyboard management
• 🎨 Customizable: Easily modifiable CSS styles
• 📦 No dependencies: Only React as peer dependency
• 🔧 Simple: Intuitive and easy-to-use API

📦 Installation

npm install @getsu7/react-simple-modal

or with yarn:

yarn add @getsu7/react-simple-modal

🚀 Basic Usage

import { useState } from 'react';
import Modal from '@getsu7/react-simple-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Modal
      </button>

      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
      >
        <h2>Modal Title</h2>
        <p>Your modal content here.</p>
        <button onClick={() => setIsOpen(false)}>
          Close
        </button>
      </Modal>
    </div>
  );
}

📖 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls the modal visibility | | onClose | function | required | Callback called on close | | children | ReactNode | required | Modal content | | className | string | '' | Additional CSS class | | closeOnEscape | boolean | true | Close with Escape key | | closeOnOverlayClick | boolean | true | Close by clicking on overlay | | showCloseButton | boolean | true | Show close button (×) | | ariaLabel | string | 'Fenêtre modale' | ARIA label for accessibility |

🎨 Usage Examples

Confirmation Modal

<Modal isOpen={showConfirm} onClose={() => setShowConfirm(false)}>
  <h3>Confirm Action?</h3>
  <p>Are you sure you want to continue?</p>
  <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
    <button onClick={handleConfirm}>Confirm</button>
    <button onClick={() => setShowConfirm(false)}>Cancel</button>
  </div>
</Modal>

Modal without Close Button

<Modal 
  isOpen={isProcessing} 
  onClose={() => {}}
  showCloseButton={false}
  closeOnEscape={false}
  closeOnOverlayClick={false}
>
  <div style={{ textAlign: 'center' }}>
    <div className="spinner" />
    <p>Processing...</p>
  </div>
</Modal>

Modal with Custom Style

<Modal 
  isOpen={isOpen} 
  onClose={handleClose}
  className="custom-modal"
>
  <h2>Custom Modal</h2>
  <p>Content with custom style</p>
</Modal>

Add your custom CSS:

.custom-modal {
  max-width: 600px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

♿ Accessibility

The component follows accessibility best practices:

• ARIA: Uses role="dialog" and aria-modal="true"
• Focus: Automatically manages focus (focus trap)
• Keyboard: Escape key support to close
• Screen readers: Customizable ARIA labels

🤝 Contributing

Contributions are welcome! Feel free to open an issue or a pull request.

🔗 Links

• GitHub Repository
• NPM Package

Created by getsu7