React-drawline NPM

react-drawline

You can connect your react components with drawing lines between them

And the best part is, it can be either a diagonal line or in the shape of L!

Installation

Install react-drawline with npm

  npm install react-drawline

or with yarn

  yarn add react-drawline

Usage/Examples

import {useRef} from "react"
import { StraightLine, LineL } from "react-drawline";
// inside the component...
const box1Ref = useRef(null)
const box2Ref = useRef(null)

// return part...
<StraightLine
  startingElement={{
    ref: box1Ref,
    x: "right",
    y: "mid",
  }}
  endingElement={{
    ref: box2Ref,
    x: "center",
    y: "top",
  }}
  style={{backgroundColor: "red"}}
  className="beautiful-class-name"
/>

<LineL
  startingElement={{
    ref: box1Ref,
    x: "center",
    y: "bottom",
  }}
  endingElement={{
    ref: box2Ref,
    x: "left",
    y: "mid",
  }}
  shape="upsidedownL"
  color="green"
  thickness={5}
/>

// components/elements to be draw line to connect
<div ref={box1Ref}></div>
<div ref={box2Ref}></div>

API Referance

StraightLine

This React component should take following props:

startingElement: object (required) | Key | Value | | ------------- |:-------------:| | ref (required) | object | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
endingElement: object (required) | Key | Value | | ------------- |:-------------:| | ref (required) | object | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |

LineL

This React component should take following props:

startingElement: object (required) | Key | Value | | ------------- |:-------------:| | ref (required) | object | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
endingElement: object (required) | Key | Value | | ------------- |:-------------:| | ref (required) | object | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
shape: string ("upsidedownL", optional, defaults to "normal")