0
# Core Trigger Component
1
2
The main Trigger component that manages popup behavior, positioning, and lifecycle. It wraps a single child element and renders a popup when triggered by various user interactions.
3
4
## Capabilities
5
6
### Trigger Component
7
8
The primary component for creating popup triggers with full control over visibility, positioning, and behavior.
9
10
```typescript { .api }
11
/**
12
* Main trigger component that manages popup visibility and positioning
13
* @param props - Configuration for trigger behavior and popup rendering
14
*/
15
export default class Trigger extends React.Component<TriggerProps>;
16
17
interface TriggerProps {
18
/** Single child element that acts as the trigger */
19
children: React.ReactElement;
20
21
/** Popup content or function returning popup content */
22
popup: React.ReactNode | (() => React.ReactNode);
23
24
/** Trigger actions that control popup visibility */
25
action?: ActionType | ActionType[];
26
27
/** Specific actions that show the popup (overrides action) */
28
showAction?: ActionType[];
29
30
/** Specific actions that hide the popup (overrides action) */
31
hideAction?: ActionType[];
32
33
/** Controlled visibility state */
34
popupVisible?: boolean;
35
36
/** Default visibility state for uncontrolled usage */
37
defaultPopupVisible?: boolean;
38
39
/** Callback when popup visibility changes */
40
onPopupVisibleChange?: (visible: boolean) => void;
41
42
/** Callback after popup visibility change completes */
43
afterPopupVisibleChange?: (visible: boolean) => void;
44
45
/** Popup click event handler */
46
onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
47
48
/** CSS class name for the trigger wrapper */
49
className?: string;
50
51
/** CSS class name for the popup */
52
popupClassName?: string;
53
54
/** Custom styles for the popup */
55
popupStyle?: React.CSSProperties;
56
57
/** CSS class prefix for popup elements */
58
prefixCls?: string;
59
60
/** Z-index for the popup */
61
zIndex?: number;
62
63
/** Whether to render popup even when hidden */
64
forceRender?: boolean;
65
66
/** Whether to destroy popup DOM when hidden */
67
destroyPopupOnHide?: boolean;
68
69
/** Whether to auto-destroy popup on component unmount */
70
autoDestroy?: boolean;
71
72
/** Whether to show overlay mask */
73
mask?: boolean;
74
75
/** Whether clicking mask closes popup */
76
maskClosable?: boolean;
77
78
/** Custom popup container function */
79
getPopupContainer?: (node: HTMLElement) => HTMLElement;
80
81
/** Custom document getter */
82
getDocument?: (element?: HTMLElement) => HTMLDocument;
83
84
/** Popup stretch configuration */
85
stretch?: string;
86
87
/** Whether to align popup to mouse point */
88
alignPoint?: boolean;
89
90
/** Popup alignment configuration */
91
popupAlign?: AlignType;
92
93
/** Placement key from builtinPlacements */
94
popupPlacement?: string;
95
96
/** Predefined placement configurations */
97
builtinPlacements?: BuildInPlacements;
98
99
/** Generate CSS class name from alignment result */
100
getPopupClassNameFromAlign?: (align: AlignType) => string;
101
102
/** Callback when popup alignment completes */
103
onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
104
105
/** Delay in seconds before showing popup on mouse enter */
106
mouseEnterDelay?: number;
107
108
/** Delay in seconds before hiding popup on mouse leave */
109
mouseLeaveDelay?: number;
110
111
/** Delay in seconds before showing popup on focus */
112
focusDelay?: number;
113
114
/** Delay in seconds before hiding popup on blur */
115
blurDelay?: number;
116
117
/** RC-Motion configuration for popup animations */
118
popupMotion?: CSSMotionProps;
119
120
/** RC-Motion configuration for mask animations */
121
maskMotion?: CSSMotionProps;
122
123
/** @deprecated Use popupMotion instead */
124
popupTransitionName?: TransitionNameType;
125
126
/** @deprecated Use popupMotion instead */
127
popupAnimation?: AnimationType;
128
129
/** @deprecated Use maskMotion instead */
130
maskTransitionName?: TransitionNameType;
131
132
/** @deprecated Use maskMotion instead */
133
maskAnimation?: string;
134
135
/** @private Get trigger DOM node (internal use) */
136
getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
137
138
/** @private Mobile-specific configuration (internal use) */
139
mobile?: MobileConfig;
140
}
141
```
142
143
### Default Props
144
145
The Trigger component comes with sensible defaults for most properties:
146
147
```typescript { .api }
148
static defaultProps = {
149
prefixCls: 'rc-trigger-popup',
150
action: [],
151
showAction: [],
152
hideAction: [],
153
popupClassName: '',
154
popupStyle: {},
155
defaultPopupVisible: false,
156
mask: false,
157
maskClosable: true,
158
destroyPopupOnHide: false,
159
autoDestroy: false,
160
mouseEnterDelay: 0,
161
mouseLeaveDelay: 0.1,
162
focusDelay: 0,
163
blurDelay: 0.15,
164
popupAlign: {},
165
onPopupVisibleChange: () => {},
166
afterPopupVisibleChange: () => {},
167
onPopupAlign: () => {},
168
getPopupClassNameFromAlign: () => '',
169
getDocument: (element?: HTMLElement) => element?.ownerDocument || window.document,
170
};
171
```
172
173
**Usage Examples:**
174
175
```typescript
176
import React, { useState } from "react";
177
import Trigger from "rc-trigger";
178
179
// Basic click trigger
180
function ClickTrigger() {
181
return (
182
<Trigger
183
action={['click']}
184
popup={<div>Click popup content</div>}
185
>
186
<button>Click me</button>
187
</Trigger>
188
);
189
}
190
191
// Controlled trigger
192
function ControlledTrigger() {
193
const [visible, setVisible] = useState(false);
194
195
return (
196
<Trigger
197
popupVisible={visible}
198
onPopupVisibleChange={setVisible}
199
popup={<div>Controlled popup</div>}
200
>
201
<button>Controlled trigger</button>
202
</Trigger>
203
);
204
}
205
206
// Custom container
207
function CustomContainerTrigger() {
208
return (
209
<div id="custom-container">
210
<Trigger
211
action={['click']}
212
popup={<div>Popup in custom container</div>}
213
getPopupContainer={() => document.getElementById('custom-container')}
214
>
215
<button>Click me</button>
216
</Trigger>
217
</div>
218
);
219
}
220
221
// Multiple actions
222
function MultiActionTrigger() {
223
return (
224
<Trigger
225
action={['click', 'hover']}
226
popup={<div>Works with click or hover</div>}
227
mouseEnterDelay={0.1}
228
mouseLeaveDelay={0.3}
229
>
230
<button>Multi-action trigger</button>
231
</Trigger>
232
);
233
}
234
235
// With mask overlay
236
function MaskTrigger() {
237
return (
238
<Trigger
239
action={['click']}
240
popup={<div>Popup with mask</div>}
241
mask={true}
242
maskClosable={true}
243
>
244
<button>Click to show with mask</button>
245
</Trigger>
246
);
247
}
248
```
249
250
## Advanced Configuration
251
252
### Popup Content Function
253
254
The popup prop can be a function that returns content, useful for dynamic popups:
255
256
```typescript
257
<Trigger
258
action={['click']}
259
popup={() => (
260
<div>
261
<p>Dynamic content</p>
262
<p>Current time: {new Date().toLocaleTimeString()}</p>
263
</div>
264
)}
265
>
266
<button>Dynamic popup</button>
267
</Trigger>
268
```
269
270
### Destroy Behavior
271
272
Control when popup DOM is removed:
273
274
```typescript
275
// Keep popup DOM even when hidden (default)
276
<Trigger destroyPopupOnHide={false} />
277
278
// Remove popup DOM when hidden
279
<Trigger destroyPopupOnHide={true} />
280
281
// Auto-destroy on component unmount
282
<Trigger autoDestroy={true} />
283
```
284
285
## Type Definitions
286
287
```typescript { .api }
288
type ActionType = string; // Common actions: 'click', 'hover', 'focus', 'contextMenu', 'mouseEnter', 'mouseLeave', 'blur'
289
290
type TransitionNameType = string;
291
292
type AnimationType = string;
293
294
type StretchType = string; // Popup stretch configuration
295
296
interface AlignType {
297
points?: AlignPoint[];
298
offset?: number[];
299
targetOffset?: number[];
300
overflow?: {
301
adjustX?: boolean | number;
302
adjustY?: boolean | number;
303
};
304
useCssRight?: boolean;
305
useCssBottom?: boolean;
306
useCssTransform?: boolean;
307
ignoreShake?: boolean;
308
}
309
310
type AlignPoint = string; // Two-character combinations like 'tl', 'tr', 'bl', 'br', 'cc'
311
312
type BuildInPlacements = Record<string, AlignType>;
313
314
interface CSSMotionProps {
315
motionName?: string | object;
316
motionAppear?: boolean;
317
motionEnter?: boolean;
318
motionLeave?: boolean;
319
removeOnLeave?: boolean;
320
forceRender?: boolean;
321
}
322
323
interface MobileConfig {
324
popupMotion?: CSSMotionProps;
325
popupClassName?: string;
326
popupStyle?: React.CSSProperties;
327
popupRender?: (originNode: React.ReactNode) => React.ReactNode;
328
}
329
```