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

npm install react-connect-the-dots

Usage

<Dot />

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.

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

import Dot from 'react-connect-the-dots';
 
const CustomComponent = ({ getRef }) => (
  <div ref={getRef}>hello</div>
);
 
const App = () => (
  <div className="relative-position-container">
 
    <Dot pair="a-b" connector={(props) => <div className="sweet-line" {...props} />}>
      {(ref) => <CustomComponent className="position-top-left" getRef={ref} />}
    </Dot>
 
    <Dot pair="b-c" connector={(props) => <div className="sweet-line thicc" {...props} />}>
      <Dot pair="a-b">
        {(ref) => <CustomComponent className="position-bottom-left" getRef={ref} />}
      </Dot>
    </Dot>
 
    <Dot pair="b-c">
      {(ref) => <CustomComponent className="position-bottom-right" getRef={ref} />}
    </Dot>
  </div>
);

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/.

npm start

Testing

npm test