Global Modals

The GlobalModals component is a wrapper that manages and displays multiple modal dialogs within an application. It leverages the @start-base/react-modal library to provide a seamless experience for handling modals, including custom configurations for each modal instance. You can define and control various modal windows, such as sidebars, drawers, and confirmation dialogs within a global context.

Features

🗂️ Centralized Modal Management: Manages multiple modals in a single place, providing a structured way to control and configure each modal instance.

🔄 Flexible Configuration: Supports various configuration options for each modal, such as custom class names, overlay behavior, and close actions.

🚀 React Context Support: Utilizes React context to manage modal state and provide access to modal controls (useModal) across the application.

🛠️ @start-base/react-modal: Leverages the library to handle modal creation and management, offering built-in accessibility, customizable behavior, and seamless integration with React.

What's Included

< ModalProvider />

The ModalProvider component supplies the necessary context for managing modals within the GlobalModals component. By placing ModalProvider around the main application content, you ensure that modals can be opened, closed, or toggled from any component within the app.

< GlobalModals />

GlobalModals component is a wrapper component that encapsulates all modal instances within the application. It should be placed at a high level in the component tree to ensure modals are accessible from anywhere in the app. You need to wrap your application's modal definitions within the GlobalModals component to manage their state globally. Additionally, The GlobalModals component is flexible and can be used in multiple instances across different parts of your application. This allows you to group modals by context or section, ensuring that only relevant modals are loaded and managed where they are needed.

< useModal />

useModalis a hook that provides access to modal control functions, such as opening and closing modals, from within any component that needs to interact with modals. When using the openModal/closeModel function from the useModal hook, you need to specify the name of the modal you want to open/close. This name is defined when you set up your modals in the GlobalModals component. By passing the modal's name to the openModal/closeModal function, you control which modal is displayed or closed.

< Modal />

Modal defines a specific modal window. It supports customization. To use this component, you need to define each modal within GlobalModals using the Modal component.

Modal Props

Name	Type	Default	Description
name	string	undefined	The unique name of the modal, used to identify and control the modal instance.
className	string	undefined	Custom class name for the modal content.
overlayClassName	string	undefined	Custom class name for the overlay background.
shouldCloseOnOverlayClick	boolean	true	Determines whether the modal should close when the overlay is clicked.
closeTimeoutMS	number	500	The time in milliseconds for the modal to close with a fade-out animation.
appElement	string	"html"	The HTML element that the modal will be attached to.
children	ReactNode	undefined	Content to be rendered inside the modal.