Draw a line between two elements in React.
yarn
yarn dev
Browse to localhost:3000.
Draw line between two DOM elements.
import LineTo from 'react-lineto-ts';
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.
| 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 | |
| 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
Draw stepped line between two DOM elements.
import { SteppedLineTo } from 'react-lineto-ts';
function render() {
return (
<div>
<div className="A">Element A</div>
<div className="B">Element B</div>
<SteppedLineTo from="A" to="B" orientation="v" />
</div>
);
}
| 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 | |
| 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 horizontal, "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 | |
| zIndex | number | Z-index offset |
* Required
Draw line using pixel coordinates (relative to viewport).
import { Line } from 'react-lineto-ts';
function render() {
return (
<Line x0={0} y0={0} x1={10} y1={10} />
);
}
| 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 | |
| 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent