tessl/npm-mantine--modals

Modals manager based on Mantine components providing context-based modal state management with confirmation, context, and content modals.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@mantine/modals

Name: tessl/npm-mantine--modals
Author: tessl

@mantine/modals is a comprehensive modal management system built on top of Mantine UI components for React applications. It provides a context-based approach to handle modal state management with features including programmatic modal opening/closing, confirmation modals, context modals, and modal updating capabilities.

Package Information

Package Name: @mantine/modals
Package Type: npm
Language: TypeScript
Installation: npm install @mantine/core @mantine/hooks @mantine/modals

Core Imports

import { ModalsProvider, useModals, modals } from "@mantine/modals";
import { openModal, closeModal, openConfirmModal, openContextModal } from "@mantine/modals";
import type { ContextModalProps, MantineModalsOverride, MantineModals, MantineModal } from "@mantine/modals";

For CommonJS:

const { ModalsProvider, useModals, openModal, closeModal } = require("@mantine/modals");

Basic Usage

import { MantineProvider } from "@mantine/core";
import { ModalsProvider, openModal, openConfirmModal } from "@mantine/modals";

function App() {
  return (
    <MantineProvider>
      <ModalsProvider>
        <MyComponent />
      </ModalsProvider>
    </MantineProvider>
  );
}

function MyComponent() {
  const showModal = () => {
    openModal({
      title: "Welcome",
      children: <div>Hello from modal!</div>,
    });
  };

  const showConfirm = () => {
    openConfirmModal({
      title: "Delete item",
      children: <div>Are you sure you want to delete this item?</div>,
      labels: { confirm: "Delete", cancel: "Cancel" },
      onConfirm: () => console.log("Confirmed"),
      onCancel: () => console.log("Cancelled"),
    });
  };

  return (
    <div>
      <button onClick={showModal}>Show Modal</button>
      <button onClick={showConfirm}>Show Confirm</button>
    </div>
  );
}

Architecture

@mantine/modals is built around several key components:

Provider System: ModalsProvider manages global modal state and provides context
Event System: Global functions for imperative modal control from anywhere in the app
Hook API: useModals hook for component-based modal management
Modal Types: Support for content, confirmation, and context modals
Stack Management: Multiple modals with proper layering and focus management

Capabilities

Provider Setup

Modal system initialization and configuration including shared modal properties and custom modal registration.

interface ModalsProviderProps {
  children?: React.ReactNode;
  modals?: Record<string, React.FC<ContextModalProps<any>>>;
  modalProps?: ModalSettings;
  labels?: ConfirmLabels;
}

function ModalsProvider(props: ModalsProviderProps): JSX.Element;

Provider Setup

Basic Modal Management

Core modal operations for opening, closing, and updating content modals with custom children.

function openModal(props: ModalSettings): string;
function closeModal(id: string): void;
function closeAllModals(): void;
function updateModal(payload: { modalId: string } & Partial<ModalSettings>): void;

Basic Modal Management

Confirmation Modals

Specialized modals with confirm/cancel buttons for user confirmations and destructive actions.

function openConfirmModal(props: OpenConfirmModal): string;

interface OpenConfirmModal extends ModalSettings, ConfirmModalProps {}

Confirmation Modals

Context Modals

Predefined reusable modal components registered with the provider for consistent modal experiences.

function openContextModal<TKey extends MantineModal>(
  payload: OpenContextModal<Parameters<MantineModals[TKey]>[0]['innerProps']> & { modal: TKey }
): string;

Context Modals

Hook-based Usage

React hook providing access to modal context methods for component-based modal management.

function useModals(): ModalsContextProps;

Hook-based Usage

Modals Namespace

Namespace object providing alternative access to modal functions with cleaner naming.

const modals: {
  open: (props: ModalSettings) => string;
  close: (id: string) => void;
  closeAll: () => void;
  openConfirmModal: (props: OpenConfirmModal) => string;
  openContextModal: <TKey extends MantineModal>(
    payload: OpenContextModal<Parameters<MantineModals[TKey]>[0]['innerProps']> & { modal: TKey }
  ) => string;
  updateModal: (payload: { modalId: string } & Partial<ModalSettings>) => void;
  updateContextModal: (payload: { modalId: string } & Partial<OpenContextModal<any>>) => void;
};

Core Types

Note: The following types extend Mantine UI component types (ModalProps, ButtonProps, GroupProps) from @mantine/core. See Mantine documentation for complete type definitions.

interface ModalSettings extends Partial<Omit<ModalProps, 'opened'>> {
  modalId?: string;
  children?: React.ReactNode;
  title?: React.ReactNode;
  onClose?: () => void;
}

interface ConfirmLabels {
  confirm: React.ReactNode;
  cancel: React.ReactNode;
}

interface ContextModalProps<T extends Record<string, any> = {}> {
  context: ModalsContextProps;
  innerProps: T;
  id: string;
}

interface ModalsContextProps {
  modalProps: ModalSettings;
  modals: ModalState[];
  openModal: (props: ModalSettings) => string;
  openConfirmModal: (props: OpenConfirmModal) => string;
  openContextModal: <TKey extends MantineModal>(
    modal: TKey,
    props: OpenContextModal<Parameters<MantineModals[TKey]>[0]['innerProps']>
  ) => string;
  closeModal: (id: string, canceled?: boolean) => void;
  closeContextModal: <TKey extends MantineModal>(id: TKey, canceled?: boolean) => void;
  closeAll: () => void;
  updateModal: (payload: { modalId: string } & Partial<OpenConfirmModal>) => void;
  updateContextModal: (payload: { modalId: string } & Partial<OpenContextModal<any>>) => void;
}

interface MantineModalsOverride {}

type MantineModalsOverwritten = MantineModalsOverride extends {
  modals: Record<string, React.FC<ContextModalProps<any>>>;
}
  ? MantineModalsOverride
  : {
      modals: Record<string, React.FC<ContextModalProps<any>>>;
    };

type MantineModals = MantineModalsOverwritten['modals'];

type MantineModal = keyof MantineModals;

type ModalState =
  | { id: string; props: ModalSettings; type: 'content' }
  | { id: string; props: OpenConfirmModal; type: 'confirm' }
  | { id: string; props: OpenContextModal; type: 'context'; ctx: string };

interface OpenContextModal<CustomProps extends Record<string, any> = {}> extends ModalSettings {
  innerProps: CustomProps;
}

interface OpenConfirmModal extends ModalSettings, ConfirmModalProps {}

interface ConfirmModalProps {
  id?: string;
  children?: React.ReactNode;
  onCancel?: () => void;
  onConfirm?: () => void;
  closeOnConfirm?: boolean;
  closeOnCancel?: boolean;
  cancelProps?: ButtonProps & React.ComponentPropsWithoutRef<'button'> & Record<`data-${string}`, any>;
  confirmProps?: ButtonProps & React.ComponentPropsWithoutRef<'button'> & Record<`data-${string}`, any>;
  groupProps?: GroupProps;
  labels?: ConfirmLabels;
}