React-curveto NPM

React-CurveTo

Draw a curve/line between two elements in React. Fork and modify from react-lineto

Installation and usage

The easiest way to use react-curveto is to install it from npm and build it into your app with Webpack.

yarn add react-curveto

Then use it in your app:

import React from 'react';
import CurveTo from 'react-curveto';

class App extends React.Component {
render() {
    return (
            <div>
                <div className="A">Element A</div>
                <div className="B">Element B</div>
                <CurveTo
                        from="A"
                        to="B"
                        fromAnchor="top"
                        toAnchor="bottom"
                        borderColor="#000"
                        borderStyle="dotted"
                        borderWidth={2}
                        delay={0}
                        curveFrom={[50, 50]}
                        curveTo={[-100, -50]}
                    />
            </div>
        );
    }
}

Props

Name	Type	Description	Example Values
borderColor	string	Border color	`#f00`, `red`, etc.
borderStyle	string	Border style	`solid`, `dashed`, etc.
borderWidth	number	Border width (px)
className	string	Desired CSS className for the rendered element
delay	number or bool	Force render after delay (ms)	`0`, `1`, `100`, `true`
fromAnchor	string	Anchor for starting point (Format: "x y")	`top right`, `bottom center`, `left`, `100% 0`
from*	string	CSS class name of the first element
toAnchor	string	Anchor for ending point (Format: "x y")	`top right`, `bottom center`, `left`, `100% 0`
to*	string	CSS class name of the second element
within	string	CSS class name of the desired container
zIndex	number	Z-index offset
curveFrom*	array	Cubic control point offset, default 0,0	0,0, 50,-50, etc.
curveTo*	array	Cubic control point offset, default 0,0	0,0, 50,-50, etc.