react-native-leader-line/lib/components/LeaderLine.d.ts

React Native port of leader-line library for drawing arrow lines and connectors

/**
 * @fileoverview React Native Leader Line Component
 * @description Main LeaderLine component optimized for LLM consumption with comprehensive JSDoc
 * @version 1.1.0
 * @author Federico Garcia
 *
 * @example Basic Usage
 * ```tsx
 * import React, { useRef } from 'react';
 * import { View } from 'react-native';
 * import { LeaderLine } from 'react-native-leader-line';
 *
 * const MyComponent = () => {
 *   const startRef = useRef(null);
 *   const endRef = useRef(null);
 *
 *   return (
 *     <View>
 *       <View ref={startRef} style={{ width: 100, height: 50 }} />
 *       <View ref={endRef} style={{ width: 100, height: 50 }} />
 *       <LeaderLine
 *         start={{ element: startRef }}
 *         end={{ element: endRef }}
 *         color="#3498db"
 *         strokeWidth={3}
 *         endPlug="arrow1"
 *       />
 *     </View>
 *   );
 * };
 * ```
 *
 * @example Advanced Styling
 * ```tsx
 * <LeaderLine
 *   start={{ element: startRef }}
 *   end={{ element: endRef }}
 *   color="#e74c3c"
 *   strokeWidth={4}
 *   path="arc"
 *   curvature={0.3}
 *   endPlug="arrow2"
 *   outline={{ enabled: true, color: "white", size: 2 }}
 *   dropShadow={{ dx: 2, dy: 2, blur: 4, color: "rgba(0,0,0,0.3)" }}
 *   startLabel="Begin"
 *   endLabel="End"
 * />
 * ```
 */
import * as React from "react";
import { LeaderLineProps } from "../types";
/**
 * @component LeaderLine
 * @description A React Native component for drawing arrow lines and connectors between UI elements.
 * This component provides a powerful and flexible way to create visual connections in mobile apps.
 *
 * @param {LeaderLineProps} props - Component props
 * @param {Attachment} props.start - Starting attachment point (required)
 * @param {Attachment} props.end - Ending attachment point (required)
 * @param {SocketPosition} [props.startSocket="center"] - Where the line connects to the start element
 * @param {SocketPosition} [props.endSocket="center"] - Where the line connects to the end element
 * @param {string} [props.color="#ff6b6b"] - Line color (CSS color string)
 * @param {number} [props.strokeWidth=2] - Line thickness in pixels
 * @param {number} [props.size] - Legacy alias for strokeWidth (leader-line compatibility)
 * @param {number} [props.opacity=1] - Line opacity (0-1)
 * @param {PathType|PathConfiguration} [props.path="straight"] - Line path type
 * @param {number} [props.curvature=0.2] - Curve amount for arc paths (0-1)
 * @param {PlugType} [props.startPlug="none"] - Start marker type
 * @param {PlugType} [props.endPlug="arrow1"] - End marker type
 * @param {string} [props.startPlugColor] - Custom color for start marker
 * @param {string} [props.endPlugColor] - Custom color for end marker
 * @param {number} [props.startPlugSize=10] - Start marker size
 * @param {number} [props.endPlugSize=10] - End marker size
 * @param {boolean|DashOptions} [props.dash] - Dash pattern configuration
 * @param {boolean|OutlineOptions} [props.outline] - Line outline configuration
 * @param {boolean|PlugOutlineOptions} [props.startPlugOutline] - Start marker outline
 * @param {boolean|PlugOutlineOptions} [props.endPlugOutline] - End marker outline
 * @param {boolean|DropShadowOptions} [props.dropShadow=false] - Drop shadow configuration
 * @param {LabelOptions} [props.label] - Simple label configuration
 * @param {ViewStyle} [props.style] - Container style
 * @param {React.ReactNode} [props.children] - Child components
 * @param {string|EnhancedLabelOptions} [props.startLabel] - Label at line start
 * @param {string|EnhancedLabelOptions} [props.middleLabel] - Label at line middle
 * @param {string|EnhancedLabelOptions} [props.endLabel] - Label at line end
 * @param {string|EnhancedLabelOptions} [props.captionLabel] - Caption label
 * @param {string|EnhancedLabelOptions} [props.pathLabel] - Path label
 *
 * @returns {React.ReactElement|null} The rendered LeaderLine component
 *
 * @since 1.0.0
 * @public
 */
export declare const LeaderLine: React.FC<LeaderLineProps>;
/**
 * @namespace LeaderLineEnhanced
 * @description Enhanced exports with anchor creation functions for compatibility with original API
 *
 * @example Using anchor functions
 * ```tsx
 * import { LeaderLineEnhanced } from 'react-native-leader-line';
 *
 * const pointAnchor = LeaderLineEnhanced.pointAnchor(elementRef, 10, 20);
 * const areaAnchor = LeaderLineEnhanced.areaAnchor(elementRef, 0, 0, 100, 50);
 * ```
 */
export declare const LeaderLineEnhanced: {
    pointAnchor: (element: React.RefObject<any>, options?: {
        x: number;
        y: number;
    }) => {
        element: React.RefObject<any>;
        x: number;
        y: number;
    };
    areaAnchor: (element: React.RefObject<any>, options?: any) => {
        element: React.RefObject<any>;
        x: any;
        y: any;
        width: any;
        height: any;
    };
    mouseHoverAnchor: (element: React.RefObject<any>, options?: any) => {
        element: React.RefObject<any>;
        showEffectName: any;
        hideEffectName: any;
        animOptions: any;
        style: any;
        hoverStyle: any;
    };
    LeaderLine: React.FC<LeaderLineProps>;
};
export default LeaderLine;
//# sourceMappingURL=LeaderLine.d.ts.map