0
# Provider Setup
1

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

4
## Capabilities
5

6
### ModalsProvider Component
7

8
Root provider component that manages modal state and provides context to child components.
9

10
```typescript { .api }
11
/**
12
 * Root provider component for modal state management
13
 * @param props - Provider configuration options
14
 * @returns JSX element providing modal context to children
15
 */
16
function ModalsProvider(props: ModalsProviderProps): JSX.Element;
17

18
interface ModalsProviderProps {
19
  /** Your app components */
20
  children?: React.ReactNode;
21
  /** Predefined modals registered by key */
22
  modals?: Record<string, React.FC<ContextModalProps<any>>>;
23
  /** Shared Modal component props, applied to every modal */
24
  modalProps?: ModalSettings;
25
  /** Default confirm modal labels */
26
  labels?: ConfirmLabels;
27
}
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
import { MantineProvider } from "@mantine/core";
34
import { ModalsProvider } from "@mantine/modals";
35

36
// Basic setup
37
function App() {
38
  return (
39
    <MantineProvider>
40
      <ModalsProvider>
41
        <MyAppContent />
42
      </ModalsProvider>
43
    </MantineProvider>
44
  );
45
}
46

47
// Advanced setup with configuration
48
function AppWithConfig() {
49
  return (
50
    <MantineProvider>
51
      <ModalsProvider
52
        modalProps={{
53
          centered: true,
54
          overlayProps: { backgroundOpacity: 0.55 },
55
          radius: "md",
56
        }}
57
        labels={{
58
          confirm: "Confirm",
59
          cancel: "Cancel",
60
        }}
61
        modals={{
62
          deleteConfirmation: DeleteConfirmationModal,
63
          userProfile: UserProfileModal,
64
        }}
65
      >
66
        <MyAppContent />
67
      </ModalsProvider>
68
    </MantineProvider>
69
  );
70
}
71
```
72

73
### Provider Configuration
74

75
Configure shared modal properties and default labels that apply to all modals.
76

77
```typescript { .api }
78
/**
79
 * Shared modal configuration applied to all modals
80
 */
81
interface ModalSettings extends Partial<Omit<ModalProps, 'opened'>> {
82
  /** Unique identifier for the modal */
83
  modalId?: string;
84
  /** Modal content */
85
  children?: React.ReactNode;
86
  /** Modal title */
87
  title?: React.ReactNode;
88
  /** Callback when modal is closed */
89
  onClose?: () => void;
90
  /** Modal size */
91
  size?: string | number;
92
  /** Whether modal is centered */
93
  centered?: boolean;
94
  /** Modal padding */
95
  padding?: string | number;
96
  /** Modal radius */
97
  radius?: string | number;
98
  /** Overlay properties */
99
  overlayProps?: any;
100
  /** Transition properties */
101
  transitionProps?: any;
102
}
103

104
/**
105
 * Default labels for confirmation modals
106
 */
107
interface ConfirmLabels {
108
  /** Text or element for confirm button */
109
  confirm: React.ReactNode;
110
  /** Text or element for cancel button */
111
  cancel: React.ReactNode;
112
}
113
```
114

115
### Context Modal Registration
116

117
Register reusable modal components that can be opened by key.
118

119
```typescript { .api }
120
/**
121
 * Props interface for context modal components
122
 */
123
interface ContextModalProps<T extends Record<string, any> = {}> {
124
  /** Modal context providing access to modal methods */
125
  context: ModalsContextProps;
126
  /** Custom props passed when opening the modal */
127
  innerProps: T;
128
  /** Unique modal instance ID */
129
  id: string;
130
}
131
```
132

133
**Context Modal Example:**
134

135
```typescript
136
import { ContextModalProps } from "@mantine/modals";
137
import { Button, Text } from "@mantine/core";
138

139
interface DeleteModalProps {
140
  itemName: string;
141
  onConfirm: () => void;
142
}
143

144
const DeleteConfirmationModal: React.FC<ContextModalProps<DeleteModalProps>> = ({
145
  context,
146
  id,
147
  innerProps,
148
}) => {
149
  const handleConfirm = () => {
150
    innerProps.onConfirm();
151
    context.closeModal(id);
152
  };
153

154
  return (
155
    <div>
156
      <Text mb="md">
157
        Are you sure you want to delete "{innerProps.itemName}"?
158
      </Text>
159
      <Button.Group>
160
        <Button variant="default" onClick={() => context.closeModal(id)}>
161
          Cancel
162
        </Button>
163
        <Button color="red" onClick={handleConfirm}>
164
          Delete
165
        </Button>
166
      </Button.Group>
167
    </div>
168
  );
169
};
170

171
// Register with provider
172
<ModalsProvider modals={{ deleteConfirmation: DeleteConfirmationModal }}>
173
  {/* Your app */}
174
</ModalsProvider>
175
```
176

177
### Module Augmentation
178

179
Extend the type system to include your custom modals for type safety.
180

181
```typescript { .api }
182
/**
183
 * Module augmentation interface for custom modal registration
184
 */
185
interface MantineModalsOverride {}
186

187
/**
188
 * Augment the module to include your custom modals
189
 */
190
declare module "@mantine/modals" {
191
  interface MantineModalsOverride {
192
    modals: {
193
      deleteConfirmation: ContextModalProps<{
194
        itemName: string;
195
        onConfirm: () => void;
196
      }>;
197
      userProfile: ContextModalProps<{
198
        userId: string;
199
      }>;
200
    };
201
  }
202
}
203
```