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.

* Required

Thanks

Thank you to everyone who has contributed to this project. It's been a wild ride.

License

MIT Licensed. Copyright (c) Quang Dinh 2019.