{"id":11640,"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.","status":"maintenance","version":"5.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/react-component/trigger","tags":["javascript","react","react-component","react-trigger","trigger","typescript"],"install":[{"cmd":"npm install rc-trigger","lang":"bash","label":"npm"},{"cmd":"yarn add rc-trigger","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-trigger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all React components to function.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components, especially for handling portals and direct DOM manipulations often needed by overlay components.","package":"react-dom","optional":false}],"imports":[{"note":"The main component is exported as a default export, as shown in the package's usage examples.","wrong":"import { Trigger } from 'rc-trigger';","symbol":"Trigger","correct":"import Trigger from 'rc-trigger';"},{"note":"Use 'import type' for type-only imports to avoid bundling issues and ensure correct type checking in TypeScript environments.","wrong":"import { TriggerProps } from 'rc-trigger';","symbol":"TriggerProps","correct":"import type { TriggerProps } from 'rc-trigger';"},{"note":"The default styling is provided in LESS format. A LESS preprocessor (e.g., `less-loader` for Webpack) is required in your build setup to correctly process this import. Custom CSS can also be provided.","wrong":"import 'rc-trigger/assets/index.css';","symbol":"Styling","correct":"import 'rc-trigger/assets/index.less';"}],"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."},"warnings":[{"fix":"Evaluate migrating your codebase from `rc-trigger` to `@rc-component/trigger`. This may involve updating import paths, adjusting prop names, and potentially refactoring component logic due to internal changes and the rewrite to functional components/hooks in the successor package.","message":"Active development and significant refactoring (e.g., migration to React Hooks) have largely shifted to the `@rc-component/trigger` package. While `rc-trigger` (unscoped) is still published (last 3 years ago), it is effectively in maintenance mode. For new projects or upgrading existing ones, it's strongly recommended to use `@rc-component/trigger` to benefit from the latest features, performance improvements, and better compatibility with newer React versions (e.g., React 18's strict mode features).","severity":"breaking","affected_versions":">=5.x"},{"fix":"Ensure your build setup includes a LESS preprocessor to handle `.less` files. For Webpack, install `less` and `less-loader` and configure your `webpack.config.js` to process LESS files. Alternatively, provide your own custom CSS that mimics or replaces the default styles.","message":"The default styling for `rc-trigger` is provided in LESS format (`rc-trigger/assets/index.less`). Directly importing this file without a configured LESS preprocessor in your build pipeline (e.g., `less-loader` for Webpack) will result in compilation errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If encountering unexpected behavior or warnings with React 18, particularly in Strict Mode, consider migrating to `@rc-component/trigger` which has been updated with React Hooks and newer patterns. If staying on `rc-trigger`, thoroughly test your application in Strict Mode.","message":"While `rc-trigger`'s peer dependencies satisfy React 16.9 and up, it has not received direct updates to leverage newer React 18 features (e.g., `useSyncExternalStore` or full Strict Mode compatibility, which were addressed in the `@rc-component/trigger` refactor). Using `rc-trigger` in a React 18 application, especially with Strict Mode enabled, might expose subtle behavioral differences or warnings.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that `popup` and `children` props render valid React elements or primitives. For example, `popup={<span>Content</span>}` instead of `popup={{ content: 'Content' }}`.","cause":"Passing a plain JavaScript object directly as a child or popup prop where a renderable React node (element, string, number, array of nodes) is expected.","error":"Error: Objects are not valid as a React child (found: object with keys {x, y}). If you meant to render a collection of children, use an array instead."},{"fix":"Install `less` and `less-loader` (e.g., `npm install --save-dev less less-loader`) and configure your Webpack setup to handle `.less` files by adding a rule for them that uses `less-loader`.","cause":"Your build system (e.g., Webpack) is not configured to process LESS files, or the necessary `less-loader` is missing.","error":"Webpack compilation error: Module not found: Error: Can't resolve 'rc-trigger/assets/index.less' in 'your-project-path'"},{"fix":"If you need to pass a ref to the child of `Trigger` that is a functional component, wrap that functional component with `React.forwardRef`. Alternatively, use a class component or ensure the ref is placed on a DOM element within the child.","cause":"Attempting to attach a ref directly to a functional component that is passed as a child to `Trigger`, which `rc-trigger` might try to access for positioning or event handling.","error":"Warning: Function components cannot be given refs. Attempts to use refs on function components will fail. Consider wrapping your function component in an `React.forwardRef` call, or changing the component to a class."}],"ecosystem":"npm"}