はじめに

leader-line-newを使って要素間を線でつなぐとのメモ
線を引くライブラリをいくつか存在したが、
その中でも使いやすそうで見た目も良かったライブラリをReactで使って見たときのメモ

ライブラリの説明

leader-lineとleader-line-newで似たライブラリがあった
TypeScriptで使うときはleader-line-newを使うらしい
※ 詳しい説明は下記参照
https://www.npmjs.com/package/leader-line-new
https://anseki.github.io/leader-line/

いろんな種類の線が引ける。
色変えたり、グラデーション付けたり、動いているようにアニメーション付けたり、ホバー時に線を引いたり、矢印の形を変えたり

線を引く

import React, { useEffect, useRef } from "react";
import LeaderLine from "leader-line-new";

・・・・
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
        new LeaderLine(
            div2Ref.current,
            div2Ref.current
        )
  }, [div1Ref, div2Ref]);

 return (
    <div ref={div1Ref}>
       div1
    </div>
    <div ref={div2Ref}>
       div2
    </div>
  );
};
・・・・

オプションめも

コメントのところは、検証した時の形跡

      new LeaderLine(
        LeaderLine.mouseHoverAnchor(div1Ref.current), // mouseHoverAnchor hoverで表示
        LeaderLine.pointAnchor(div2Ref.current, {
          x: 50,
          y: 30
        }), // pointAnchor 位置の変更
        {
          // color: "red",
          size: 6,
          dropShadow: true, // 影
          // outline: true,
          // endPlugOutline: true,
          // endPlugSize: 1,
          dash: {
            animation: {
              duration: 1000, // アニメーションの速さ（減らすごとに早くなる）
              timing: "ease-in-out" // アニメーションの動き方
            }
          },
          startPlugColor: "#1a6be0", // グラデーション時のスタートの色
          endPlugColor: "#1efdaa", // グラデーション時のエンド色
          gradient: true, // グラデーション
          path: "grid", // 曲線、角線など straight, arc, fluid, magnet, grid
          // startPlug: "square", // スタートの矢印などの表示
          endPlug: "arrow3" // エンドの矢印などの表示
          // startLabel: LeaderLine.captionLabel("START"), // スタートラベル
          // middleLabel: LeaderLine.captionLabel("MIDDLE"), // 中間ラベル
          // endLabel: LeaderLine.pathLabel("This is additional label") // エンドラベル
        }
      );

最後に

まだ編集中です。