react-lineto-yanxi

react-lineto

Draw a line between two elements in React.

Getting Started

yarn install
yarn run demo

Browse to localhost:4567.

Components

LineTo

Draw line between two DOM elements.

Example

import LineTo from 'react-lineto';

function render() {
    return (
        <div>
            <div className="A">Element A</div>
            <div className="B">Element B</div>
            <LineTo from="A" to="B" />
        </div>
    );
}

Properties

Name	Type	Description	Example Values
from*	string	CSS class name of the first element
to*	string	CSS class name of the second element
fromAnchor	string	Anchor for starting point (Format: "x y")	top right, bottom center, 100% 0
toAnchor	string	Anchor for ending point (Format: "x y")	top right, bottom center, 100% 0
delay	number	Force render after delay (ms)
className	string	Desired CSS className for the rendered element
border	string	Line decoration (CSS border property syntax)	1px solid #000
zIndex	number	Z-index offset

* Required

Line

Draw line using pixel coordinates (relative to viewport).

Example

import { Line } from 'react-lineto';

function render() {
    return (
        <Line x0={0} y0={0} x1={10} y1={10} />
    );
}

Properties

Name	Type	Description	Example Values
x0*	number	First X coordinate
y0*	number	First Y coordinate
x1*	number	Second X coordinate
y1*	number	Second Y coordinate
className	string	Desired CSS className for the rendered element
border	string	Line decoration (CSS border property syntax)	1px solid #000
zIndex	number	Z-index offset

* Required