kdeloach / React Lineto
Licence: mit
Draw a line between two elements in React
Stars: ✭ 150
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Lineto
Yerna
A Lerna-like tool for managing Javascript monorepos using Yarn
Stars: ✭ 140 (-6.67%)
Mutual labels: yarn
Cheatsheets
A curated list of everything I look up more than twice
Stars: ✭ 109 (-27.33%)
Mutual labels: yarn
Vscode Deploy Reloaded
Recoded version of Visual Studio Code extension 'vs-deploy', which provides commands to deploy files to one or more destinations.
Stars: ✭ 129 (-14%)
Mutual labels: yarn
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+816%)
Mutual labels: yarn
Verdaccio
📦🔐 A lightweight Node.js private proxy registry
Stars: ✭ 12,667 (+8344.67%)
Mutual labels: yarn
Barebones
A barebones boilerplate for getting started on a bespoke front end.
Stars: ✭ 127 (-15.33%)
Mutual labels: yarn
Foxy
A fast, reliable, and secure NPM/Yarn bridge for Composer
Stars: ✭ 137 (-8.67%)
Mutual labels: yarn
Cli
This repository contains tools and helpers for React Native projects in form of a command line tool. There's been quite some confusion around that since the extraction from React Native core. Let's clear them up:
Stars: ✭ 1,731 (+1054%)
Mutual labels: yarn
Yarn
The 1.x line is frozen - features and bugfixes now happen on https://github.com/yarnpkg/berry
Stars: ✭ 40,325 (+26783.33%)
Mutual labels: yarn
Klap
zero config, zero dependency bundler for tiny javascript packages
Stars: ✭ 143 (-4.67%)
Mutual labels: yarn
Hapi Starter Kit
Hapi.js based REST boilerplate which uses latest ES7/ES8 features (async/await) with code coverage and follows best pratices
Stars: ✭ 103 (-31.33%)
Mutual labels: yarn
Rails React Typescript Docker Example
An example app built on Ruby on Rails 6.1 + React.js 17 + TypeScript 4.2 + Docker Compose
Stars: ✭ 129 (-14%)
Mutual labels: yarn
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (-2%)
Mutual labels: yarn
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-3.33%)
Mutual labels: yarn
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].