react-draw-arrow

Connect components with a simple arrow

Getting Started

# Install the library
npm install react-draw-arrow
yarn add react-draw-arrow

import { DrawArrow, WaterDrop } from "react-draw-arrow";

const App = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  return (
    <>
      <div ref={box1} />
      <div ref={box2} />
      <DrawArrow
        mainComponent={box1}
        childComponents={[box2]}
        pathConfig={{ blur: true }}
        animate
        animationConfig={{
          delay: 1,
          duration: 3,
          nItems: 3,
          curveStyle: "beizer",
          blur: true,
        }}
        animationInput={(props) => <WaterDrop {...props} />}
      />
    </>
  );
};

Examples

• https://codesandbox.io/s/suspicious-butterfly-x6hk2g
• https://codesandbox.io/s/lucid-dijkstra-dn8qpq

Simple use case

import { DrawArrow, WaterDrop } from "react-draw-arrow";

const App = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  return (
    <>
      <div ref={box1} />
      <div ref={box2} />
      <DrawArrow
        mainComponent={box1}
        childComponents={[box2]}
        pathConfig={{ blur: true }}
        animate
        animationConfig={{
          delay: 1,
          duration: 3,
          nItems: 3,
          curveStyle: "beizer",
          blur: true,
        }}
        animationInput={(props) => <WaterDrop {...props} />}
      />
    </>
  );
};

Using react-draggable

import { DrawArrow, WaterDrop } from "react-draw-arrow";
import Draggable from "react-draggable";

const App = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  return (
    <>
       <Draggable
          bounds="body"
          position={{x: 100, y: 50}}
        >
          <div ref={box1}>
            Box 1
          </div>
        </Draggable>
       <Draggable
          bounds="body"
          position={{x: 300, y: 600}}
        >
          <div ref={box2}>
            Box 2
          </div>
        </Draggable>
      <DrawArrow
        mainComponent={box1}
        childComponents={[box2]}
        pathConfig={{ blur: true }}
        animate
        animationConfig={{
          delay: 1,
          duration: 3,
          nItems: 3,
          curveStyle: "beizer",
          blur: true,
        }}
        animationInput={(props) => <WaterDrop {...props} />}
      />
    </>
  );
};

Animation components

• Circle
• WaterDrop

Circle

import { DrawArrow, Circle } from "react-draw-arrow";

const App = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  return (
    <>
      <div ref={box1} />
      <div ref={box2} />
      <DrawArrow
        mainComponent={box1}
        childComponents={[box2]}
        pathConfig={{ blur: true }}
        animate
        animationConfig={{
          delay: 1,
          duration: 3,
          nItems: 3,
          curveStyle: "beizer",
          blur: true,
        }}
        animationInput={(props) => <Circle {...props} />}
      />
    </>
  );
};

WaterDrop

import { DrawArrow, WaterDrop } from "react-draw-arrow";

const App = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  return (
    <>
      <div ref={box1} />
      <div ref={box2} />
      <DrawArrow
        mainComponent={box1}
        childComponents={[box2]}
        pathConfig={{ blur: true }}
        animate
        animationConfig={{
          delay: 1,
          duration: 3,
          nItems: 3,
          curveStyle: "beizer",
          blur: true,
        }}
        animationInput={(props) => <WaterDrop {...props} />}
      />
    </>
  );
};

Custom animation component

Animation components are embedded inside "g" svg component.

const DEFAULT_COLOR = "black";

const AnimationComponent = ({
  path,
  duration,
  delay,
  color,
  reverse,
}: AnimationComponentProps) => {
  const [running, setRunning] = useState<boolean>(false);
  const ref = useRef<SVGElement>(null);
  const backgroundColor = color ? color : DEFAULT_COLOR;

  function toggleRunning(isRunnging: boolean) {
    setRunning(isRunnging);
  }

  useEffect(() => {
    const animationRef = ref.current;
    if (animationRef) {
      animationRef.addEventListener("beginEvent", () => toggleRunning(true));
      animationRef.addEventListener("endEvent", () => toggleRunning(false));
    }
    return () => {
      if (animationRef) {
        animationRef.removeEventListener("beginEvent", () =>
          toggleRunning(true)
        );
        animationRef.removeEventListener("beginEvent", () =>
          toggleRunning(false)
        );
      }
    };
  }, []);
  return (
       <circle r={8} fill={running ? backgroundColor : "none"}>
        <animateMotion
          dur={duration}
          repeatCount="indefinite"
          path={path}
          keyPoints={reverse ? "1;0" : "0;1"}
          keyTimes="0;1"
          begin={delay}
          ref={ref}
          offset={-100}
          startOffset={-100}
        />
      </circle>
      />
  );
};

Props

Property	Description	Type
mainComponent?	Main component	RefObject or string
childComponents?	Child components	RefObject[] or string[]
animate?	Animate arrow	boolean
showDots?	Show control position,start point and end point af arrow	boolean
showStartArrow?	Show start arrow marker	boolean
showEndArrow?	Show end arrow marker	boolean
label?	Label	string
animationInput?	Input of animation component	(props: AnimationComponentProps ) => React.ReactNode
labelInput?	Input of label component	React.ReactNode
animationConfig?	Animation configuration	AnimationConfigProps
pathConfig?	Path configuration	PathConfigProps
markerConfiguration?	Marker configuration	MarkerConfigProps

AnimationConfigProps

Property	Description	Type
duration?	Duration of animation	number
delay?	Delay of animation	number
nItems?	Number of animation items	number
nItems?	Number of animation items	number
reverse?	Animation reverse mode	number
curveStyle?	Curve style of arrow	number
blur?	Blur mode	boolean
offset?	Offset of control point regarding curve (defualt 60)	"beizer" -"straight" - "curve"
color?	Animation color	string

AnimationComponentProps

Property	Description	Type
duration?	Duration of animation	number
delay?	Delay of animation	number
path?	Path of animation	string
reverse?	Animation reverse mode	number
color?	Animation color	string

PathConfigProps

Property	Description	Type
strokeWidth?	Width of arrow (defualt 3)	number
isStrokeArray?	If arrow is dashed	boolean
blur?	Blur mode in path	boolean
color?	Path color, this case could be gradient	GradientColor

MarkerConfigProps

Property	Description	Type
scale?	Scale of marker	number
color?	Marker color (default #f00)	string

GradientColor

Property	Description	Type
start?	Start color	string
end?	End color	string