@myzbox/react-overlay


A highly configurable, accessible, and senior-grade React overlay library. Built with TypeScript, Accessibility, and Performance in mind.

Features

- 🎯 Accessible: Fully compliant with WAI-ARIA practices (focus trapping, aria attributes, keyboard navigation).
- 🎨 Animations: Built-in animations (Zoom, Fade, Slide Up/Down/Left/Right).
- 📱 Responsive: Mobile-friendly out of the box.
- 🖐 Draggable: Enable drag-and-drop support on modals.
- 🗄️ Drawer Component: Slide-out panels from any edge (Left, Right, Top, Bottom).
- 💡 Tooltip Component: Customizable tooltips with support for HTML content.
- 💬 Popover Component: Click-triggered interactive popups.
- 🍞 Toast System: Global notifications with stacking, positioning, and auto-close.
- 🌈 Themable: Configurable colors via CSS Variables.
- 🧩 Variants: Includes AlertModal, ConfirmModal, Drawer, Tooltip, Popover, and Toast.
- 🛠 Customizable: Extensive props for specific positioning, sizing, and styling.
- 📦 Lightweight: Minimal dependencies (classnames, react, react-dom).

Installation

``bash
npm install @myzbox/react-overlay


or

Ensure you have peer dependencies installed:
`bash
npm install react react-dom
`

Basic Usage

`tsx
// Complete bundle (Recommended)
import '@myzbox/react-overlay/dist/react-overlay.css';

// OR import all source modules at once
import '@myzbox/react-overlay/styles/index.css';

// 1. Wrap your app with ToastProvider
import { ToastProvider } from '@myzbox/react-overlay';

ReactDOM.createRoot(document.getElementById('root')!).render(



);
`

$3

`tsx
import React, { useState } from 'react';
import { Modal, useModal } from '@myzbox/react-overlay';

const App = () => {
const { isOpen, open, close } = useModal();

return (
<>
Open Modal

isOpen={isOpen}
onClose={close}
title="Welcome"
position="center"
animation="zoom"
draggable // Enable drag
>


This is a custom accessible modal.

`tsx
import { Tooltip } from '@myzbox/react-overlay';


Hover me


// With HTML content and custom width
content={Bold content}
width={200}
position="right"
>
HTML Tooltip

`

$3

`tsx
import { AlertModal, useModal } from '@myzbox/react-overlay';

const App = () => {
const { isOpen, open, close } = useModal();

return (
<>
Show Success Alert

isOpen={isOpen}
onClose={close}
type="success" // 'success' | 'error' | 'warning' | 'info'
message="Your changes have been saved successfully!"
okText="Got it"
onOk={() => console.log('OK clicked')}
/>

);
};
`

$3

`tsx
import { ConfirmModal, useModal } from '@myzbox/react-overlay';

const App = () => {
const { isOpen, open, close } = useModal();

const handleDelete = async () => {
// Simulate async operation
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('Deleted!');
};

return (
<>
Delete Item

isOpen={isOpen}
onClose={close}
message="Are you sure you want to delete this item? This action cannot be undone."
confirmText="Delete"
cancelText="Cancel"
isDestructive={true} // Red button for dangerous actions
onConfirm={handleDelete} // Supports async functions
onCancel={() => console.log('Cancelled')}
/>

);
};
`

$3

`tsx
import { Drawer, useModal } from '@myzbox/react-overlay';

const App = () => {
const { isOpen, open, close } = useModal();

return (
<>
Open Settings

isOpen={isOpen}
onClose={close}
placement="right" // 'left' | 'right' | 'top' | 'bottom'
title="Settings"
>


`tsx
import { Tooltip } from '@myzbox/react-overlay';

// Simple text tooltip

Copy


// Rich HTML content
content={


// Icon with tooltip

🔍

`

$3

`tsx
import { Popover } from '@myzbox/react-overlay';

// Simple content

Click Me


// Interactive menu with render prop
content={(close) => (


`tsx
import { useToast, ToastProvider } from '@myzbox/react-overlay';

// Wrap your app with ToastProvider first
function Root() {
return (



);
}

function App() {
const toast = useToast();

const showNotifications = () => {
// Simple usage
toast.success("Saved successfully!");
toast.error("Failed to save");
toast.warning("Please review your changes");
toast.info("New update available");

// Advanced with options
toast.success("File uploaded", {
position: "top-right", // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
duration: 5000, // milliseconds (0 = never auto-close)
delay: 500, // delay before showing
draggable: true // allow dragging
});

// Manual close (persist until user closes)
toast.info("Processing your request...", { duration: 0 });
};

return Show Toasts;
}
`

$3

`tsx
import { Modal, useModal } from '@myzbox/react-overlay';

const App = () => {
const { isOpen, open, close } = useModal();

return (
<>
Open Draggable Modal

isOpen={isOpen}
onClose={close}
title="Drag me around!"
draggable={true} // Enable dragging
position="center"
animation="zoom"
>


You can drag this modal by its header!

`tsx
import { useToast } from '@myzbox/react-overlay';

const MyComponent = () => {
const toast = useToast();

const handleClick = () => {
// Simple
toast.success("Operation saved!");

// Advanced
toast.error("Network Error", {
position: "bottom-right",
duration: 5000,
delay: 500, // Wait 500ms before showing
});

// Manual Close / Persistent
toast.info("Updating...", { duration: 0 }); // 0 = never close automatically
};

return Show Toast;
};
`

Theming & Customization

Define these variables in your CSS (e.g., :root) to override default colors:

`css
:root {
/ Modal Backgrounds /
--rm-overlay-bg: rgba(0, 0, 0, 0.5);
--rm-modal-bg: #ffffff;

/ Text & Borders /
--rm-text-color: #374151;
--rm-title-color: #111827;
--rm-border-color: #e5e7eb;

/ Buttons /
--rm-btn-primary-bg: #2563eb;
--rm-btn-primary-hover: #1d4ed8;
--rm-btn-primary-text: #ffffff;

--rm-btn-destructive-bg: #dc2626;
--rm-btn-destructive-hover: #b91c1c;
}
`

Components API

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| isOpen | boolean | required | Controls visibility |
| onClose | function | required | Callback when requesting close |
| children | ReactNode | required | Content of the modal |
| draggable | boolean | false | Enable drag functionality |
| position | 'center', 'top', etc. | 'center' | Position on screen |
| size | 'sm', 'md', 'lg', 'xl', 'full' | 'md' | Width size preset |
| animation | 'zoom', 'fade', 'slide-up'... | 'zoom' | Entry/Exit animation |
| hideHeader | boolean | false | Hides the header (title/close btn) |

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | 'success', 'error', 'warning', 'info' | 'info' | Visual style/icon |
| message | ReactNode | required | Alert content |
| showHeader | boolean | true | Show/Hide the header |
| onOk | function | - | Callback for OK button |

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | required | Trigger element |
| content | ReactNode | required | content of tooltip |
| position | 'top', 'bottom', 'left', 'right' | 'top' | Position relative to trigger |
| delay | number | 200 | Delay in ms before showing |
| width | string/number | - | Custom width |
| height | string/number | - | Custom height |

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | required | Trigger element (clickable) |
| content | ReactNode | required | Content of the popover |
| position | 'top', 'bottom', 'left', 'right' | 'bottom' | Position relative to trigger |
| width` | string/number | - | Custom width |

Community

- Changelog
- Roadmap
- Contributing

🤝 Contributing

Contributions are welcome!

Please read CONTRIBUTING.md before submitting a pull request.

👤 Maintainer

Maintainer: Mahantesh Teli
Email:
Organization: myZbox

For questions, bug reports, or feature requests, please open an issue.
Direct emails are recommended only for security or private concerns.

📄 License

MIT © 2026 myzbox

⭐ Support

If this library helps you:

Star the repository ⭐

Share feedback

Open issues for bugs or feature requests

---