react-abc-modal

A react modal as simple as ABC — lightweight, accessible, and fully customizable.

Features

• Fully customizable via props and classes
• Responsive
• Keyboard and screen-reader friendly
• The modal can be closed via:
  • Escape key
  • Overlay click (optional)
  • Close icon (optional)
• Written in TypeScript
• No external dependencies (only React)

Stack

• React 18+
• TypeScript + TSX
• Babel for build
• Vite for playground
• GitHub Actions for CI/CD

Installation

npm install react-abc-modal
# or
yarn add react-abc-modal

Links: NPM package and Yarn package

Quick start

import { useState } from "react";
import Modal from "react-abc-modal";

const yourComponent = () => {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open modal</button>

      <Modal isOpen={isOpen} setOpen={setOpen} closeOutside icon>
        <h1>Hello from react-abc-modal</h1>
        <p>Press Escape or click outside to close.</p>
      </Modal>
    </>
  );
};

export default yourComponent;

Supports any children: text, forms, images, or even other React components.

Props Reference

| Prop | Type | Required | Default | Description | | ---------------- | ------------------------- | -------- | ---------------- | ----------------------------------- | | isOpen | boolean | ✅ | – | Controls modal visibility | | setOpen | (open: boolean) => void | ✅ | – | Updates modal open state | | closeOutside | boolean | ❌ | true | Close modal when clicking overlay | | icon | boolean | ❌ | true | Show default close icon | | classOverlay | string | ❌ | – | Custom CSS class for overlay | | classSection | string | ❌ | – | Custom CSS class for modal content | | classIconClose | string | ❌ | – | Custom CSS class for close icon |