Modalyze

Modalyze is a powerful React library designed to create context-aware modals that are draggable, resizable, and stackable, all while maintaining access to React context. This library allows developers to open and manage multiple modals without losing the benefits of React's context API.

Key Features

• Context Preservation: Seamlessly maintain access to React context within modals, ensuring that all necessary data is available.
• Programmatic API: Easily create modals by invoking the createModal() function from any component.
• Multiple Modals: Effortlessly open and manage an unlimited number of modals concurrently.
• Draggable & Resizable: Modals can be freely moved and resized according to user preferences.
• Cascading Layout: Automatically stack multiple modals with natural offsets, creating a clear visual hierarchy.
• Smart Deduplication: Prevent duplicate modals from opening with stable IDs that ensure each modal remains unique.
• Zero Configuration Needed: Begin using Modalyze immediately without any complex setup.

Live Demo

Experience Modalyze in action through a live demo: Open in StackBlitz.

Getting Started

Begin by integrating the <Modalyze> provider into your application to enable modal functionality. Once integrated, modals can be instantiated using the useModalyze() hook, allowing straightforward creation and customization of modal components:

import { Modalyze } from 'modalyze';

function App() {
  return (
    <OtherProvider>
      <Modalyze>
        <BasicExample /> {/* Modals created here access OtherProvider */}
      </Modalyze>
    </OtherProvider>
  );
}

To create a modal, the createModal() function can be called within any component:

import { useModalyze } from 'modalyze';

const BasicModal = () => {
  return <div>Basic Modal</div>;
};

const BasicExample = () => {
  const { createModal } = useModalyze();
  return <button onClick={() => createModal(BasicModal)}>Open Modal</button>;
};

Modals will have access to context providers above the <Modalyze> component, ensuring seamless integration across your component hierarchy.

Advanced Modal Management

Creating and Closing Modals

Managing modals is straightforward with the provided instructions for creating and closing modals:

• Create modals directly with the useModalyze() hook.
• Close modals using various methods, including ESC keypress or clicking outside (customizable options available).

To programmatically manage modals:

const { close } = useModalyzeModal(); // To close within a modal
const { closeModal } = useModalyze(); // To close a specific modal by ID
const { closeAllModals } = useModalyze(); // To close all open modals

Context Access and State Sharing

Access context easily within a modal and share state between the main application and modals. This enables dynamic data interaction without complex prop drilling.

Custom Modal Behavior

Customize modal appearance and behavior with options for positioning, size, and specific actions such as preventing duplicates:

createModal(SettingsModal, { id: 'settings' }); // Prevent duplicates by ID

API Reference

Modalyze Component

The core component of the library is the <Modalyze> component, which must be included in the application to utilize modal features.

Modalyze Hook

This hook provides key functionalities:

• createModal(component, options): Create a modal imperatively.
• closeModal(modalId): Close a specific modal by its ID.
• closeAllModals(): Close all active modals.

Conclusion

Modalyze streamlines the process of managing modals in React applications, providing a context-aware solution that enhances user experience and application development.

For more information, visit the Modalyze GitHub repository to explore the documentation and examples.