Connect elements with SVG
yarn add react-connect-elementsInclude 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>
);| 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 |
| 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 |
This gist where I got how to connect two elements / draw a path between two elements with SVG path (using jQuery).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent