react-lineto

Draw a line between two elements in React.

Getting Started

yarn install
yarn run demo

Browse to localhost:4567.

Demo

Components

• LineTo
• SteppedLineTo
• Line

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>
    );
}

If using multiple instances of <LineTo /> inside separate components, you must provide a unique key for each of the container divs.

Properties

* 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

* 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

* 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