@rc-component/trigger

_{Part of the Ant Design ecosystem.}

🎯 Popup trigger and alignment primitive for React.

## 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 ```bash npm install @rc-component/trigger ``` ## Usage ```tsx import Trigger from '@rc-component/trigger'; import '@rc-component/trigger/assets/index.css'; export default () => ( Popup content} popupAlign={{ points: ['tl', 'bl'], offset: [0, 4], }} > ); ``` ## Examples Run the local dumi site: ```bash 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` | - | | onPopupVisibleChange | Deprecated. Use `onOpenChange` instead. | `(visible) => void` | - | ## Development ```bash npm install npm start npm test npm run build ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash 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) license.