react-native-leader-line
Version:
React Native port of leader-line library for drawing arrow lines and connectors
71 lines • 2.14 kB
TypeScript
/**
* @fileoverview React Native Leader Line Component
* @description Professional LeaderLine component for drawing connections between UI elements
* @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>
* );
* };
* ```
*/
import 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.
*/
export declare const LeaderLine: React.FC<LeaderLineProps>;
/**
* Enhanced exports with anchor creation functions for compatibility with original API
*/
export declare const LeaderLineEnhanced: {
pointAnchor: (element: React.RefObject<any>, options?: {
x: number;
y: number;
} | undefined) => {
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=LeaderLineClean.d.ts.map