{"library":"rc-trigger","title":"React Trigger Component","description":"rc-trigger is a foundational React component for managing and positioning overlay elements, such as tooltips, dropdowns, and context menus, relative to a target element. It abstracts the complex logic of popup display, alignment, and interaction events (like click, hover, contextMenu) into a reusable API. As of the provided metadata, the stable version is 5.3.4. While no specific release cadence for rc-trigger itself is explicitly documented (its last publish was 3 years ago), the package historically provided a robust, cross-browser solution for dynamic popup management in React applications. Its key differentiator lies in its flexibility for custom trigger actions and advanced alignment options, serving as a base for many other 'react-component' libraries. However, active feature development appears to have largely shifted to the newer, scoped package `@rc-component/trigger` within the same repository.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-trigger"],"cli":null},"imports":["import Trigger from 'rc-trigger';","import type { TriggerProps } from 'rc-trigger';","import 'rc-trigger/assets/index.less';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Trigger from 'rc-trigger';\nimport 'rc-trigger/assets/index.less'; // Import default styling\n\nconst App = () => (\n  <Trigger\n    action={['click']} // Trigger popup on click\n    popup={<span>This is the popup content!</span>}\n    popupAlign={{\n      points: ['tl', 'bl'], // Align top-left of popup to bottom-left of target\n      offset: [0, 3] // Offset popup by 3px downwards from the target\n    }}\n    destroyPopupOnHide={true} // Clean up popup DOM when hidden\n    mouseLeaveDelay={0.1} // Small delay for mouseLeave action, if 'hover' was enabled\n  >\n    <a href=\"#\" style={{ padding: '10px', border: '1px solid blue', display: 'inline-block' }}>\n      Click Me to Toggle Popup\n    </a>\n  </Trigger>\n);\n\n// Assuming a 'root' element exists in your HTML, e.g., <div id=\"root\"></div>\nconst container = document.getElementById('root');\nif (container) {\n  ReactDOM.render(<App />, container);\n} else {\n  console.error('Root container not found. Please ensure an element with id=\"root\" exists in your HTML.');\n}","lang":"javascript","description":"Demonstrates a basic click-triggered popup with custom alignment, rendering the Trigger component into a DOM container with its default styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}