react-lineto

Draw a line between two elements in React.

Getting Started

yarn install
yarn run demo

Browse to [localhost:4567](http://localhost:4567).

Demo

Demo

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
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
zIndex number Z-index offset

* Required

SteppedLineTo

Draw stepped line between two DOM elements.

Example

import { SteppedLineTo } from 'react-lineto';

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

Properties

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
orientation enum "h" for horizonal, "v" for vertical h or v
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

* 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
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
within string CSS class name of the desired container
x0* number First X coordinate
x1* number Second X coordinate
y0* number First Y coordinate
y1* number Second Y coordinate
zIndex number Z-index offset

* Required

Release Checklist

  1. Bump version in package.json
  2. Update CHANGELOG.md
  3. Run yarn build or ./scripts/update
  4. Create version commit (ex. "2.0.0")
  5. Create matching tag (ex. "2.0.0")
  6. Push master branch and tags to origin
  7. Verify Travis CI published NPM package

GitHub