React Connect Elements

Connect elements with SVG

Setup

yarn add react-connect-elements

Getting Started

Include ConnectElements in the parent component.

import ConnectElements from 'react-connect-elements';
 
const Component = () => (
  <div>
    <div className="elements">
        <div className="element element1" />
        <div className="element element2" />
    </div>
    <ConnectElements
      selector=".elements"
      elements={[{ from: '.element1', to: '.element2' }]}
    />
  </div>
);

Props

Prop	Description	Type	Default
elements	The connections of the elements	array	required
selector	The DOM target selector of the parent element	string	required
overlay	z-index value of the line connecting the elements	number	0
strokeWidth	width of the line in pixels	number	5
color	Color of the line connecting the elements	string	#666

Elements Syntax

Attribute	Description	Required
from	The DOM target selector of the start element	true
to	The DOM target selector of the end element	true
color	Color of the line connecting the elements (overrides the prop color)	false

Credits

This gist where I got how to connect two elements / draw a path between two elements with SVG path (using jQuery).