Skip to content

Latest commit

 

History

History
148 lines (119 loc) · 4.28 KB

README.md

File metadata and controls

148 lines (119 loc) · 4.28 KB
Raw

react-arrow-master

react-arrow-master is a lightweight library for connecting your react components with SVG arrows. See how it works yourself in the Sandbox!

Example

Install

Add react-arrow-master to your react project:

npm install react-arrow-master --save-dev
# or
yarn add react-arrow-master --dev

Usage / Examples

Elements can be connected with arrows if they have an id attribute and are inside an ArrowArea. The arrows are drawn by an absolute positioned SVG element that lies over the ArrowArea.

Simple Arrows - Starting from the Center of an Element

Arrows are drawn from and to the center of the specified elements by default.

import { ArrowArea } from "react-arrow-master";

const MyComponent = () => (
  <ArrowArea arrows={[{ from: "el1", to: "el2" }]}>
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <div id="el1">○</div>
      <div id="el2">○</div>
    </div>
  </ArrowArea>
);

Simple

Simple Arrows - Starting from the Side of an Element

To start from the side of an element, pass the id along with the posX and posY property as an object.

import { ArrowArea } from "react-arrow-master";

const MyComponent = () => (
  <ArrowArea
    arrows={[
      {
        from: { id: "el1", posX: "right", posY: "middle" },
        to: { id: "el2", posX: "left", posY: "middle" },
      },
    ]}
  >
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <div id="el1">Element 1</div>
      <div id="el2">Element 2</div>
    </div>
  </ArrowArea>
);

Sides

Arrows with Custom Style

Each arrow can be styled individually by the style propery.

import { ArrowArea } from "react-arrow-master";

const MyComponent = () => (
  <ArrowArea
    arrows={[
      { from: "el1", to: "el2", style: { color: "blue" } },
      {
        from: "el3",
        to: "el2",
        style: {
          color: "red",
          width: 2,
          head: "diamond",
          arrow: "smooth",
        },
      },
    ]}
  >
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <div id="el1" style={{ marginBottom: 20 }}>
        ○
      </div>
      <div id="el2" style={{ marginBottom: 20 }}>
        ○
      </div>
      <div id="el3" style={{ marginTop: 20 }}>
        ○
      </div>
    </div>
  </ArrowArea>
);

Styled

Property Description Example
color The color of the arrow as a string that can be understood by SVG. #0000ff, red, ...
width The width of the arrow. Floating point numbers can be used. 1,1.5,..
head The type of the arrow head. See here for possible values
arrow The type of the arrow line. See here for possible values

Default Style

If no style is given, default values are used. Default values can be expicitly set by passing them to the ArrowArea.

const MyComponent = () => (
  <ArrowArea
    arrows={[
      { from: "el1", to: "el2" },
      { from: "el3", to: "el2" },
    ]}
    defaultArrowStyle={{ head: "filledDiamond", width: 2 }}
  >
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
      <div id="el1" style={{ marginBottom: 20 }}>
        ○
      </div>
      <div id="el2" style={{ marginBottom: 20 }}>
        ○
      </div>
      <div id="el3" style={{ marginTop: 20 }}>
        ○
      </div>
    </div>
  </ArrowArea>
);

Default Style

Advanced Usage

TBA