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.
npm install rc-triggerVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic click-triggered popup with custom alignment, rendering the Trigger component into a DOM container with its default styling.
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.
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.
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.
Ensure that `popup` and `children` props render valid React elements or primitives. For example, `popup={<span>Content</span>}` instead of `popup={{ content: 'Content' }}`.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`.
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.