React Modal System A flexible, context-based modal and dialog system for React, allowing you to open modals from anywhere in your application.

The Problem Managing modals globally in a React application can be a hassle. You often end up with global state (isModalOpen) cluttered at the top level of your app, and you have to pass down openModal and closeModal functions through many layers of components ("prop drilling").

The Solution This library provides a simple and clean API to manage modals. It uses a React Context and a Portal to render modals at the top of your app's DOM tree, while allowing any component to trigger them with a simple hook.

Installation npm install @your-username/react-modal-system

How to Use

1. Wrap your app in In your main App.tsx or layout file, wrap your application with the ModalProvider.

// In your main App.tsx import { ModalProvider } from '@your-username/react-modal-system';

function App() { return ( {/* The rest of your application */} ); }

2. Create your Modal Components Create your modal components as you normally would. You can optionally receive a close function via props if you want an internal close button.

// MyAwesomeModal.tsx import { useModal } from '@your-username/react-modal-system';

export const MyAwesomeModal = ({ title }) => { const { close } = useModal(); // Get the close function from the context

return ( {title} This is a modal opened from anywhere! Close ); };

3. Open Modals from Anywhere Now, any component inside the ModalProvider can use the useModal hook to open any modal component.

// Any component in your app import { useModal } from '@your-username/react-modal-system'; import { MyAwesomeModal } from './MyAwesomeModal';

function MyPage() { const { open } = useModal();

const showModal = () => { // Open the modal and pass props to it open(MyAwesomeModal, { title: 'Hello from MyPage!' }); };

return ( My Page Open Modal ); }

API The top-level provider component.

useModal() A hook to access the modal system. Must be used inside a .

Returns:

open(Component, props): A function to open a modal.

Component: The modal component to render.

props (optional): An object of props to pass to the modal component.

close(): A function to close the most recently opened modal.