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

``bash
npm install
npm run dev
`

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

$3

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.

$3

`bash
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

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




Inject any React node as children.


;
``