React Trigger Component

Common errors

• 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.

  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.
  fix Ensure that `popup` and `children` props render valid React elements or primitives. For example, `popup={<span>Content</span>}` instead of `popup={{ content: 'Content' }}`.

• Webpack compilation error: Module not found: Error: Can't resolve 'rc-trigger/assets/index.less' in 'your-project-path'

  cause Your build system (e.g., Webpack) is not configured to process LESS files, or the necessary `less-loader` is missing.
  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`.

• 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.

  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.
  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.

Warnings

• breaking 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).
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install rc-trigger npm
• yarn add rc-trigger yarn
• pnpm add rc-trigger pnpm

Imports

• Trigger
  wrong:

  import { Trigger } from 'rc-trigger';

  correct:

  import Trigger from 'rc-trigger';

  The main component is exported as a default export, as shown in the package's usage examples.
• TriggerProps
  wrong:

  import { TriggerProps } from 'rc-trigger';

  correct:

  import type { TriggerProps } from 'rc-trigger';

  Use 'import type' for type-only imports to avoid bundling issues and ensure correct type checking in TypeScript environments.
• Styling
  wrong:

  import 'rc-trigger/assets/index.css';

  correct:

  import 'rc-trigger/assets/index.less';

  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.

Quickstart

Demonstrates a basic click-triggered popup with custom alignment, rendering the Trigger component into a DOM container with its default styling.

import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rc-trigger';
import 'rc-trigger/assets/index.less'; // Import default styling

const App = () => (
  <Trigger
    action={['click']} // Trigger popup on click
    popup={<span>This is the popup content!</span>}
    popupAlign={{
      points: ['tl', 'bl'], // Align top-left of popup to bottom-left of target
      offset: [0, 3] // Offset popup by 3px downwards from the target
    }}
    destroyPopupOnHide={true} // Clean up popup DOM when hidden
    mouseLeaveDelay={0.1} // Small delay for mouseLeave action, if 'hover' was enabled
  >
    <a href="#" style={{ padding: '10px', border: '1px solid blue', display: 'inline-block' }}>
      Click Me to Toggle Popup
    </a>
  </Trigger>
);

// Assuming a 'root' element exists in your HTML, e.g., <div id="root"></div>
const container = document.getElementById('root');
if (container) {
  ReactDOM.render(<App />, container);
} else {
  console.error('Root container not found. Please ensure an element with id="root" exists in your HTML.');
}