A customizable draggable, resizable modal component for React.
npm install @relativity/mini-modal_A very customizable modal that gets out of your way_
- 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.
``bash`
npm install
npm run dev
The dev server exposes an example playground showing multiple modal configurations.
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.
`bash`
npm run build
npm run test
- 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.
`tsx
import { Modal } from 'mini-modal';
import 'mini-modal/dist/style.css';
Inject any React node as children.
``