react-lineto
v3.3.0
Published
Draw a line between two elements in React.
Downloads
41,513
Readme
react-lineto
Draw a line between two elements in React.
Getting Started
yarn install
yarn run demo
Browse to localhost:4567.
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
| 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 |
| within | string | CSS class name of the desired container |
| 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
- 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