react-archer

Draw arrows between React elements

Diagram / Flow chartReact
pierpo/react-archerpierpo.github.io/react-archer/react-archer

README

react-archer


CircleCI

🏹 Draw arrows between DOM elements in React 🖋

Installation


npm install react-archer --save or yarn add react-archer

Example


Try it out!

Example

  1. ```javascript
  2. import { ArcherContainer, ArcherElement } from 'react-archer';

  4. const rootStyle = { display: 'flex', justifyContent: 'center' };
  5. const rowStyle = { margin: '200px 0', display: 'flex', justifyContent: 'space-between' };
  6. const boxStyle = { padding: '10px', border: '1px solid black' };

  8. const App = () => {
  9.   return (
  10.     <div style={{ height: '500px', margin: '50px' }}>
  11.       <ArcherContainer strokeColor="red">
  12.         <div style={rootStyle}>
  13.           <ArcherElement
  14.             id="root"
  15.             relations={[
  16.               {
  17.                 targetId: 'element2',
  18.                 targetAnchor: 'top',
  19.                 sourceAnchor: 'bottom',
  20.                 style: { strokeDasharray: '5,5' },
  21.               },
  22.             ]}
  23.           >
  24.             <div style={boxStyle}>Root</div>
  25.           </ArcherElement>
  26.         </div>

  28.         <div style={rowStyle}>
  29.           <ArcherElement
  30.             id="element2"
  31.             relations={[
  32.               {
  33.                 targetId: 'element3',
  34.                 targetAnchor: 'left',
  35.                 sourceAnchor: 'right',
  36.                 style: { strokeColor: 'blue', strokeWidth: 1 },
  37.                 label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
  38.               },
  39.             ]}
  40.           >
  41.             <div style={boxStyle}>Element 2</div>
  42.           </ArcherElement>

  44.           <ArcherElement id="element3">
  45.             <div style={boxStyle}>Element 3</div>
  46.           </ArcherElement>

  48.           <ArcherElement
  49.             id="element4"
  50.             relations={[
  51.               {
  52.                 targetId: 'root',
  53.                 targetAnchor: 'right',
  54.                 sourceAnchor: 'left',
  55.                 label: 'Arrow 3',
  56.               },
  57.             ]}
  58.           >
  59.             <div style={boxStyle}>Element 4</div>
  60.           </ArcherElement>
  61.         </div>
  62.       </ArcherContainer>
  63.     </div>
  64.   );
  65. };

  67. export default App;
  68. ```

API


ArcherContainer


Props


NameTypeDescription
---
`strokeColor``string`A
`strokeWidth``number`A
`strokeDasharray``string`Adds
`noCurves``boolean`Set
`lineStyle``string`Can
`offset``number`Optional
`svgContainerStyle``Style`Style
`children``React.Node`
`endShape``Object`An
`startMarker``boolean`Optional
`endMarker``boolean`Optional

Instance methods


If you access to the ref of your ArcherContainer, you will access the refreshScreen method.
This will allow you to have more control on when you want to re-draw the arrows.

Troubleshooting


My arrows don't re-render correctly...


Try using the refreshScreen instance method on your ArcherContainer element. You can access it through the ref of the component.

Call refreshScreen when the event that you need is triggered (onScroll etc.).