@rc-component/trigger

@rc-component/trigger

_{Part of the Ant Design ecosystem.}

🎯 Popup trigger and alignment primitive for React.

English | 简体中文

Highlights

• Built for React and maintained by the rc-component team.
• Used by Ant Design and other React component libraries.
• Ships TypeScript declarations with both ES module and CommonJS outputs.
• Keeps examples, tests, and preview builds aligned with the package source.

Install

npm install @rc-component/trigger

Usage

import Trigger from '@rc-component/trigger';
import '@rc-component/trigger/assets/index.css';

export default () => (
  <Trigger
    action={['click']}
    popup={<span>Popup content</span>}
    popupAlign={{
      points: ['tl', 'bl'],
      offset: [0, 4],
    }}
  >
    <button type="button">Open</button>
  </Trigger>
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Trigger

Prop	Description	Type	Default
action	Actions that control popup visibility.	ActionType | ActionType[]	hover
afterOpenChange	Called after popup visibility changes.	(visible) => void	-
afterPopupVisibleChange	Deprecated. Use afterOpenChange instead.	(visible) => void	-
alignPoint	Align popup to mouse position for click, hover, and context menu actions.	boolean	false
arrow	Render popup arrow.	boolean | ArrowType	-
autoDestroy	Destroy popup DOM when it is hidden.	boolean	false
blurDelay	Delay before hiding on blur, in seconds.	number	-
builtinPlacements	Named placement presets.	BuildInPlacements	{}
defaultPopupVisible	Initial uncontrolled visibility.	boolean	false
disabled	Temporarily suppress popup visibility without resetting the current open state.	boolean	false
focusDelay	Delay before showing on focus, in seconds.	number	-
forceRender	Render popup before it is first shown.	boolean	false
fresh	Keep popup content updated while closed.	boolean	-
getPopupClassNameFromAlign	Return a popup class name from the current alignment.	(align) => string	-
getPopupContainer	Return the element that should contain the popup.	(node) => HTMLElement	-
hideAction	Actions that hide popup visibility.	ActionType[]	-
mask	Render a mask behind the popup.	boolean	false
maskClosable	Close when clicking the mask.	boolean	true
maskMotion	Motion config for the mask.	CSSMotionProps	-
mouseEnterDelay	Delay before showing on mouse enter, in seconds.	number	-
mouseLeaveDelay	Delay before hiding on mouse leave, in seconds.	number	0.1
popup	Popup content.	ReactNode | () => ReactNode	-
popupAlign	Alignment config compatible with dom-align.	AlignType	-
popupClassName	Class name added to popup.	string	-
popupMotion	Motion config for the popup.	CSSMotionProps	-
popupPlacement	Placement key from builtinPlacements.	string	-
popupStyle	Inline popup style.	React.CSSProperties	-
popupVisible	Controlled popup visibility.	boolean	-
prefixCls	Popup class name prefix.	string	rc-trigger-popup
showAction	Actions that show popup visibility.	ActionType[]	-
stretch	Stretch popup width and/or height from target.	string	-
unique	Share popup container through UniqueProvider.	boolean	-
uniqueContainerClassName	Class name passed to UniqueProvider container.	string	-
uniqueContainerStyle	Style passed to UniqueProvider container.	React.CSSProperties	-
zIndex	Popup z-index.	number	-
onOpenChange	Called when visibility changes.	(visible) => void	-
onPopupAlign	Called when the popup is aligned.	(element, align) => void	-
onPopupClick	Called when popup is clicked.	React.MouseEventHandler<HTMLDivElement>	-
onPopupVisibleChange	Deprecated. Use onOpenChange instead.	(visible) => void	-

Development

npm install
npm start
npm test
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/trigger is released under the MIT license.

Similar packages

Other packages similar to @rc-component/trigger

react-popper

react-popper is a React wrapper around Popper.js, a library used to position poppers (floating elements) in web applications. It provides similar functionality for managing the positioning and behavior of tooltips, popovers, and other overlay elements. Compared to @rc-component/trigger, react-popper focuses more on positioning and less on the trigger actions.

react-tooltip

react-tooltip is a simple and customizable tooltip component for React. It allows developers to easily add tooltips to their applications with various customization options. While it provides tooltip functionality similar to @rc-component/trigger, it is more specialized and does not offer the same level of flexibility for other types of popups or overlay elements.

rc-tooltip

rc-tooltip is another React component library from the same authors as @rc-component/trigger. It focuses specifically on tooltip functionality, providing a simple and customizable way to add tooltips to React applications. It shares some similarities with @rc-component/trigger but is more specialized for tooltip use cases.