Box Arrows

ka-boxarrows is a react library, developed and maintained by Pradeep([email protected]).

Use this to connect to div. you can specify the color of the connector and the direction.

Installation

Use the package manager to install ka-boxarrows

yarn add ka-boxarrows

pnpm install ka-boxarrows

npm install ka-boxarrows

Usage

import Draggable from 'react-draggable';
import { useState } from 'react';

const BoxArrowsWithDraggableBoxes = ({
  strokeColor,
  dir,
}: {
  strokeColor: string;
  dir: Direction;
}) => {
  const [className, setClassName] = useState('');
  return (
    <div>
      <Draggable onDrag={() => setClassName(`${Date.now()}`)}>
        <div
          id='startId'
          style={{
            width: 100,
            height: 100,
            backgroundColor: 'green',
          }}
        />
      </Draggable>
      <Draggable onDrag={() => setClassName(`${Date.now()}`)}>
        <div
          id='endId'
          style={{
            width: 100,
            height: 100,
            backgroundColor: '#ff5533',
          }}
        />
      </Draggable>
      <BoxArrow
        startId={'startId'}
        endId={'endId'}
        dir={dir}
        strokeColor={strokeColor}
        className={className}
      />
    </div>
  );
};

export function App() {
  return <BoxArrowsWithDraggableBoxes strokeColor={'red'} dir={'left'} />;
}

This is how you connect the 2 divs with id startId and endId.

<BoxArrow
  startId={'startId'}
  endId={'endId'}
  dir={dir}
  strokeColor={strokeColor}
  className={className}
/>