1.0.1 • Published 4 years ago
react-bezier v1.0.1
react-bezier
Small and simple library for ReactJs for plotting bezier curves
Install dependencies
npm install react-bezierDemo
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>