https://github.com/itsdouges/react-connect-the-dots

⭕ Dynamically positions a component between two elements, for React.js
https://github.com/itsdouges/react-connect-the-dots

Last synced: 6 months ago
JSON representation

⭕ Dynamically positions a component between two elements, for React.js

• Host: GitHub
• URL: https://github.com/itsdouges/react-connect-the-dots
• Owner: itsdouges
• License: mit
• Created: 2017-09-15T03:57:17.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-30T06:52:53.000Z (about 8 years ago)
• Last Synced: 2025-06-12T02:56:27.802Z (7 months ago)
• Language: JavaScript
• Homepage: https://madou.github.io/react-connect-the-dots
• Size: 569 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# [react-connect-the-dots](https://github.com/madou/react-connect-the-dots)

[![NPM version](http://img.shields.io/npm/v/react-connect-the-dots.svg?style=flat-square)](https://www.npmjs.com/package/react-connect-the-dots)

[![NPM downloads](http://img.shields.io/npm/dm/react-connect-the-dots.svg?style=flat-square)](https://www.npmjs.com/package/react-connect-the-dots)

[![Build Status](http://img.shields.io/travis/madou/react-connect-the-dots/master.svg?style=flat-square)](https://travis-ci.org/madou/react-connect-the-dots)

[![codecov](https://codecov.io/gh/madou/react-connect-the-dots/branch/master/graph/badge.svg)](https://codecov.io/gh/madou/react-connect-the-dots)

[![Dependency Status](http://img.shields.io/david/madou/react-connect-the-dots.svg?style=flat-square)](https://david-dm.org/madou/react-connect-the-dots)

Positions an component `connector` between two components. Wrap a from and to component, give them a pair name, and customise the line as you see fit.

Explicitly a client side _only_ solution.



  



## Installation

```sh

npm install react-connect-the-dots

```

## Usage

### ``

You can wrap components in a `Dot` to draw a connector between them.

Each connector `pair` should only have two `Dots`, if you try to add

more an exception will be thrown.

`Dot`s can be nested! Only the deepest `Dot` needs a function as children.

```javascript

import Dot from 'react-connect-the-dots';

const CustomComponent = ({ getRef }) => (

  
hello

);


const App = () => (

  


     
}>

      {(ref) => }

    


     
}>

      

        {(ref) => }

      

    


    

      {(ref) => }

    

  

);

```


| prop | type | required | description |

|-|-|-|-|

| pair | `string`  | yes | The name that each dot pair will share. |

| connector | `(props) => Node` | no | The connector to be drawn between dots. This can be on all, one, or none for a `Dot` pair. |

| children | `(ref) => Node` or `Dot` | yes | |

### React Story Book

To run the component in various modes, run the following command then go to `http://localhost:6006/`.

```bash

npm start

```

### Testing

```bash

npm test

```