🚀 Socket Launch Week 🚀 Day 2: Introducing Repository Labels and Security Policies.Learn More
Socket
Sign inDemoInstall
Socket

react-lineto

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lineto

Draw a line between two elements in React.

3.3.0
latest
Source
npm
Version published
Weekly downloads
6.8K
-9.17%
Maintainers
1
Weekly downloads
 
Created
Source

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

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

Properties

NameTypeDescriptionExample Values
borderColorstringBorder color#f00, red, etc.
borderStylestringBorder stylesolid, dashed, etc.
borderWidthnumberBorder width (px)
classNamestringDesired CSS className for the rendered element
delaynumber or boolForce render after delay (ms)0, 1, 100, true
fromAnchorstringAnchor for starting point (Format: "x y")top right, bottom center, left, 100% 0
from*stringCSS class name of the first element
toAnchorstringAnchor for ending point (Format: "x y")top right, bottom center, left, 100% 0
to*stringCSS class name of the second element
withinstringCSS class name of the desired container
zIndexnumberZ-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

NameTypeDescriptionExample Values
borderColorstringBorder color#f00, red, etc.
borderStylestringBorder stylesolid, dashed, etc.
borderWidthnumberBorder width (px)
classNamestringDesired CSS className for the rendered element
delaynumber or boolForce render after delay (ms)0, 1, 100, true
fromAnchorstringAnchor for starting point (Format: "x y")top right, bottom center, left, 100% 0
from*stringCSS class name of the first element
orientationenum"h" for horizonal, "v" for verticalh or v
toAnchorstringAnchor for ending point (Format: "x y")top right, bottom center, left, 100% 0
to*stringCSS class name of the second element
withinstringCSS class name of the desired container
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
borderColorstringBorder color#f00, red, etc.
borderStylestringBorder stylesolid, dashed, etc.
borderWidthnumberBorder width (px)
classNamestringDesired CSS className for the rendered element
withinstringCSS class name of the desired container
x0*numberFirst X coordinate
x1*numberSecond X coordinate
y0*numberFirst Y coordinate
y1*numberSecond Y coordinate
zIndexnumberZ-index offset

* Required

Release Checklist

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

FAQs

Package last updated on 15 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts