Custom Curved Arrow
Pumki UIInstallation
Usage
import { CustomCurvedArrow } from '@/components/pumki-ui/sections/timeline/custom-curved-arrow.tsx';1<CustomCurvedArrow />Example
Pumki UIPumki UIProps
| Prop | Type | Default | Description |
|---|---|---|---|
startElement | React.RefObject<HTMLElement> | null | required | Reference to the element where the arrow starts. |
endElement | React.RefObject<HTMLElement> | null | required | Reference to the element where the arrow ends. |
obstacleElement | React.RefObject<HTMLElement> | null | undefined | Optional reference to an obstacle element for path calculation. |
startX | number | 0 | Manual X coordinate for the start point (overrides element if provided). |
startY | number | 0 | Manual Y coordinate for the start point (overrides element if provided). |
endX | number | 100 | Manual X coordinate for the end point (overrides element if provided). |
endY | number | 100 | Manual Y coordinate for the end point (overrides element if provided). |
curveIntensity | number | 0.4 | Controls the strength of the curve between start and end. |
curveType | ”smooth” | “dramatic” | “s-curve” | “wave” | “spiral” | “elegant” | “shortest-path” | “around-obstacle" | "smooth” | Type of curve used for the arrow path. |
curveDirection | ”auto” | “up” | “down” | “left” | “right" | "auto” | Direction preference for the curve. |
strokeWidth | number | 4 | Width of the arrow stroke. |
arrowSize | number | 20 | Size of the arrow head. |
className | string | "" | Custom CSS classes for the container. |
animated | boolean | undefined | If true, enables arrow animation (not implemented in current code). |
startPosition | ”top” | “bottom” | “left” | “right” | “center” | “top-left” | “top-right” | “bottom-left” | “bottom-right" | "bottom” | Anchor position on the start element. |
endPosition | ”top” | “bottom” | “left” | “right” | “center” | “top-left” | “top-right” | “bottom-left” | “bottom-right" | "top” | Anchor position on the end element. |
Last updated on