🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

react-lineto is a React component to draw a line between two elements in web app.

Others React

Documentation

react-lineto

Draw a line between two elements in React.

Build Status

Getting Started

yarn install yarn run demo 

Browse to localhost:4567.

Demo

Demo

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

You May Also Like