react-lineto

Draw a line between two elements in React.


Getting Started

``
yarn install
yarn run demo
`

Browse to localhost:4567.

Components

$3

Draw line between two DOM elements.

#### Example

`
import LineTo from 'react-lineto';

function render() {
return (


| 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

$3

Draw line using pixel coordinates (relative to viewport).

#### Example

`
import { Line } from 'react-lineto';

function render() {
return (

);
}
`

#### 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