Pushmodal

Pushmodal: Simplified Modal Management for Shadcn UI in React

Pushmodal is a dedicated React library designed to streamline the handling of shadcn UI's dialogs, sheets, and drawers. It abstracts the underlying Radix UI mechanisms, providing developers with a concise API to programmatically push, pop, and replace modals. This tool simplifies modal state management, supports event-driven interactions, and offers helpers for responsive modal displays, enabling a more efficient workflow for building interactive user experiences with complex modal requirements.

Features:

• Centralized Modal Initialization: Use createPushModal to define all modals and generate a set of control functions.
• Modal Provider Setup: Integrate <ModalProvider /> at the application root to enable modal context.
• Programmatic Modal Opening: Employ pushModal('ModalName', { props }) to display modals with type-safe props.
• Flexible Modal Closing: Utilize popModal() for the last modal, popModal('ModalName') for a specific one, or popAllModals() to clear all.
• Modal Replacement: Seamlessly switch the current modal using replaceWithModal('NewModalName', { props }).
• Component-Level Event Listening: Leverage the useOnPushModal hook for reacting to modal open/close events within React components.
• Global Event Subscription: Use onPushModal for global listeners to modal state changes, with an unsubscribe option.
• Responsive Modal Display: Implement adaptive modals (e.g., Drawer on mobile, Dialog on desktop) with the createResponsiveWrapper utility.
• Custom Wrapper Integration: Define custom wrapper components (like shadcn's Drawer) for specific modal types during setup.
• Shadcn Content Compatibility: Designed for use with shadcn's <DialogContent>, <SheetContent>, and <DrawerContent> components.
• Built on Radix UI: Leverages the robustness of @radix-ui/react-dialog for core modal primitives.
• Type-Safe Props: Modal component props are automatically inferred, ensuring type safety.

Summary:

Pushmodal significantly simplifies the management of shadcn UI modals within React applications. It provides a clean, intuitive API for controlling dialogs, sheets, and drawers, including features for event handling and responsive design. By abstracting Radix UI complexities, Pushmodal empowers developers to build sophisticated modal interactions efficiently, reducing boilerplate and enhancing the development of dynamic user interfaces.