react-bezier

Small and simple library for ReactJs for plotting bezier curves

Install dependencies

npm install react-bezier

Demo

https://error-256.github.io/react-bezier/

Demo source codes

https://github.com/Error-256/react-bezier/tree/master/src/docs

Settings:

| method | description | default | | :------- | :------------------------ | :------- | | settings | array of settings objects | required | | arrow | direction arrow | true |

Settings object:

| name | description | | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | from | start id | | to | end id | | positions | contains 2 properties: start and end responsible for display settings. side - the side to which the line is attached, indent - the indent from the edge (optional, by default in the center) | | style | css class |

Example

import ReactBezier from "react-bezier";

...

const settings = [
  {
    from: "cube-1",
    to: "cube-2",
    positions: {
      start: {
        side: "bottom",
        indent: 20
      },
      end: {
        side: "top",
      },
    },
    style: "red-line",
  }
]

...

<ReactBezier settings={settings}>
  <div>
    <div id="cube-1"></div>
    <div id="cube-2"></div>
  </div>
</ReactBezier>