1.2.4 • Published 7 years ago

react-lineto-yanxi v1.2.4

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

react-lineto

Draw a line between two elements in React.

Build Status

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

NameTypeDescriptionExample Values
from*stringCSS class name of the first element
to*stringCSS class name of the second element
fromAnchorstringAnchor for starting point (Format: "x y")top right, bottom center, 100% 0
toAnchorstringAnchor for ending point (Format: "x y")top right, bottom center, 100% 0
delaynumberForce render after delay (ms)
classNamestringDesired CSS className for the rendered element
borderstringLine decoration (CSS border property syntax)1px solid #000
zIndexnumberZ-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

NameTypeDescriptionExample Values
x0*numberFirst X coordinate
y0*numberFirst Y coordinate
x1*numberSecond X coordinate
y1*numberSecond Y coordinate
classNamestringDesired CSS className for the rendered element
borderstringLine decoration (CSS border property syntax)1px solid #000
zIndexnumberZ-index offset

* Required

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago