Mini-Modal

A very customizable modal that gets out of your way

Features

• Draggable top bar that keeps the dialog centered when opened.
• Optional overlay that can still allow interaction with the page beneath.
• Show/hide footer with optional close button and optional resize handles.
• Pass any JSX for header, footer, or close buttons.
• Multiple instances can be open simultaneously without collisions.
• Ships with a dedicated CSS file for styling plus className hooks for overrides.
• Works in both TypeScript and plain JavaScript projects.

Getting started

npm install
npm run dev

The dev server exposes an example playground showing multiple modal configurations.

Troubleshooting installs

If npm install fails with a 403 Forbidden error from the npm registry, your environment likely blocks access to scoped packages (for example @testing-library/jest-dom). Try using your organization-approved mirror or configure registry credentials that allow access to the default registry before running the install step.

Build & test

npm run build
npm run test

Project structure

• src/modal/Modal.tsx – The modal component and public API.
• src/modal/modal.css – Default styles (imported automatically by src/index.ts).
• src/App.tsx – Playground demonstrating multiple modal setups.
• docs/USER_GUIDE.md – Usage reference with copy-pastable snippets.

Using in your app

import { Modal } from 'mini-modal';
import 'mini-modal/dist/style.css';

<Modal show={open} onClose={close} footerResizable className="my-theme">
  <p>Inject any React node as children.</p>
</Modal>;