https://github.com/kdeloach/react-lineto

Draw a line between two elements in React
https://github.com/kdeloach/react-lineto

react yarn

Last synced: 6 days ago
JSON representation

Draw a line between two elements in React

• Host: GitHub
• URL: https://github.com/kdeloach/react-lineto
• Owner: kdeloach
• License: mit
• Created: 2017-02-14T03:55:42.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-01-09T08:12:18.000Z (12 months ago)
• Last Synced: 2024-12-24T21:04:26.928Z (13 days ago)
• Topics: react, yarn
• Language: JavaScript
• Homepage:
• Size: 1.25 MB
• Stars: 234
• Watchers: 8
• Forks: 64
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-lineto

Draw a line between two elements in React.

[![Build Status](https://app.travis-ci.com/kdeloach/react-lineto.svg?branch=master)](https://app.travis-ci.com/kdeloach/react-lineto)

## Getting Started

```

yarn install

yarn run demo

```

Browse to [localhost:4567](http://localhost:4567).

## Demo

![Demo](https://github.com/kdeloach/react-lineto/raw/master/preview.png)

## Components

* [LineTo](#lineto)

* [SteppedLineTo](#steppedlineto)

* [Line](#line)

### LineTo

Draw line between two DOM elements.

#### Example

```

import LineTo from 'react-lineto';

function render() {

    return (

        


            
Element A

            
Element B

            

        

    );

}

```

If using multiple instances of `` 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 (

        


            
Element A

            
Element B

            

        

    );

}

```


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

        

    );

}

```

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

1. Update `CHANGELOG.md`

1. Run `yarn build` or `./scripts/update`

1. Create version commit (ex. "2.0.0")

1. Create matching tag (ex. "2.0.0")

1. Push `master` branch and tags to origin

1. Verify Travis CI published NPM package