or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation.mdevents.mdindex.mdpositioning.mdtrigger-component.md
tile.json

tessl/npm-rc-trigger

Base abstract trigger component for React that manages popup behavior and positioning with hover, click, focus actions and precise alignment.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-trigger@5.3.x

To install, run

npx @tessl/cli install tessl/npm-rc-trigger@5.3.0

index.mddocs/

RC-Trigger

RC-Trigger is a foundational trigger component for React applications that manages popup behavior and positioning. It provides comprehensive trigger functionality including hover, click, focus, and context menu actions with precise popup alignment using dom-align integration, customizable animations and transitions through rc-motion, and built-in accessibility features.

Package Information

  • Package Name: rc-trigger
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-trigger

Core Imports

import Trigger from "rc-trigger";
import type { BuildInPlacements } from "rc-trigger";

For CommonJS:

const Trigger = require("rc-trigger");

Basic Usage

import React from "react";
import Trigger from "rc-trigger";

function BasicExample() {
  return (
    <Trigger
      action={['click']}
      popup={<div>This is the popup content</div>}
      popupAlign={{
        points: ['tl', 'bl'],
        offset: [0, 4]
      }}
    >
      <button>Click to toggle popup</button>
    </Trigger>
  );
}

Architecture

RC-Trigger is built around several key components:

  • Trigger Component: Main component that wraps children and manages popup lifecycle
  • Popup System: Internal popup rendering with portal-based positioning
  • Alignment Engine: Integration with rc-align for precise popup positioning
  • Animation System: RC-Motion integration for smooth show/hide transitions
  • Event Management: Comprehensive event handling for multiple trigger actions
  • Mobile Support: Special handling for mobile devices with touch interactions

Capabilities

Core Trigger Component

The main Trigger component that manages popup behavior, positioning, and lifecycle.

interface TriggerProps {
  children: React.ReactElement;
  popup: React.ReactNode | (() => React.ReactNode);
  action?: ActionType | ActionType[];
  showAction?: ActionType[];
  hideAction?: ActionType[];
  popupVisible?: boolean;
  defaultPopupVisible?: boolean;
  onPopupVisibleChange?: (visible: boolean) => void;
  afterPopupVisibleChange?: (visible: boolean) => void;
  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
  className?: string;
  popupClassName?: string;
  popupStyle?: React.CSSProperties;
  prefixCls?: string;
  popupAlign?: AlignType;
  popupPlacement?: string;
  builtinPlacements?: BuildInPlacements;
  mouseEnterDelay?: number;
  mouseLeaveDelay?: number;
  focusDelay?: number;
  blurDelay?: number;
  zIndex?: number;
  forceRender?: boolean;
  destroyPopupOnHide?: boolean;
  mask?: boolean;
  maskClosable?: boolean;
  popupMotion?: CSSMotionProps;
  maskMotion?: CSSMotionProps;
  // ... and additional props for advanced usage
}

export default class Trigger extends React.Component<TriggerProps>;

/**
 * Internal function to generate Trigger class with custom portal component
 * @private Internal usage - do not use in production code
 */
function generateTrigger(PortalComponent: any): React.ComponentClass<TriggerProps>;

Core Trigger API

Positioning and Alignment

Advanced popup positioning system with precise alignment configuration and overflow handling.

interface AlignType {
  points?: AlignPoint[];
  offset?: number[];
  targetOffset?: number[];
  overflow?: {
    adjustX?: boolean | number;
    adjustY?: boolean | number;
  };
  useCssRight?: boolean;
  useCssBottom?: boolean;
  useCssTransform?: boolean;
}

type BuildInPlacements = Record<string, AlignType>;

Positioning System

Animation and Motion

Motion configuration using rc-motion for smooth popup transitions and mask animations.

interface TriggerProps {
  popupMotion?: CSSMotionProps;
  maskMotion?: CSSMotionProps;
  popupTransitionName?: TransitionNameType; // @deprecated
  popupAnimation?: AnimationType; // @deprecated
}

Animation System

Event Handling

Comprehensive event system supporting multiple trigger actions with customizable delays and behaviors.

type ActionType = 'click' | 'hover' | 'focus' | 'contextMenu';

interface TriggerProps {
  action?: ActionType | ActionType[];
  showAction?: ActionType[];
  hideAction?: ActionType[];
  mouseEnterDelay?: number;
  mouseLeaveDelay?: number;
  focusDelay?: number;
  blurDelay?: number;
}

Event Handling

Types

type AlignPoint = string; // Two-character alignment points like 'tl', 'tr', 'cc'

type ActionType = string; // Actions like 'click', 'hover', 'focus', 'contextMenu', etc.

type TransitionNameType = string;

type AnimationType = string;

type StretchType = string; // Popup stretch configuration

interface Point {
  pageX: number;
  pageY: number;
}

interface CommonEventHandler {
  remove: () => void;
}

interface CSSMotionProps {
  /** CSS class name or object for motion styling */
  motionName?: string | {
    appear?: string;
    enter?: string;
    leave?: string;
    appearActive?: string;
    enterActive?: string;
    leaveActive?: string;
  };
  /** Whether to trigger motion on initial mount */
  motionAppear?: boolean;
  /** Whether to trigger motion on enter */
  motionEnter?: boolean;
  /** Whether to trigger motion on leave */
  motionLeave?: boolean;
  /** Remove element from DOM when leave motion completes */
  removeOnLeave?: boolean;
  /** Force render element even when motion is complete */
  forceRender?: boolean;
  /** Deadline for motion to complete (ms) */
  motionDeadline?: number;
  /** Lifecycle callbacks */
  onAppearStart?: (element: HTMLElement) => void;
  onEnterStart?: (element: HTMLElement) => void;
  onLeaveStart?: (element: HTMLElement) => void;
  onAppearActive?: (element: HTMLElement) => void;
  onEnterActive?: (element: HTMLElement) => void;
  onLeaveActive?: (element: HTMLElement) => void;
  onAppearEnd?: (element: HTMLElement) => void;
  onEnterEnd?: (element: HTMLElement) => void;
  onLeaveEnd?: (element: HTMLElement) => void;
}

interface MobileConfig {
  popupMotion?: CSSMotionProps;
  popupClassName?: string;
  popupStyle?: React.CSSProperties;
  popupRender?: (originNode: React.ReactNode) => React.ReactNode;
}