1.5.0 • Published 5 years ago

react-archer-install-temp v1.5.0

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

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

import { ArcherContainer, ArcherElement } from 'react-archer';

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

const App = () => {
  return (
    <div>

      <ArcherContainer strokeColor='red' >
        <div style={rootStyle}>
          <ArcherElement
            id="root"
            relations={[{
              targetId: 'element2',
              targetAnchor: 'top',
              sourceAnchor: 'bottom',
            }]}
          >
            <div style={boxStyle}>Root</div>
          </ArcherElement>
        </div>

        <div style={rowStyle}>
          <ArcherElement
            id="element2"
            relations={[{
              targetId: 'element3',
              targetAnchor: 'left',
              sourceAnchor: 'right',
              style: { strokeColor: 'blue', strokeWidth: 1 },
              label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
            }]}
          >
            <div style={boxStyle}>Element 2</div>
          </ArcherElement>

          <ArcherElement id="element3">
            <div style={boxStyle}>Element 3</div>
          </ArcherElement>

          <ArcherElement
            id="element4"
            relations={[{
              targetId: 'root',
              targetAnchor: 'right',
              sourceAnchor: 'left',
              label: 'Arrow 3',
            }]}
          >
            <div style={boxStyle}>Element 4</div>
          </ArcherElement>
        </div>
      </ArcherContainer>

    </div>
  );
}

export default App;

API

ArcherContainer

NameTypeDescription
strokeColorstringA color string '#ff0000'
strokeWidthnumberA size in px
strokeDasharraystringAdds dashes to the stroke. It has to be a string representing an array of sizes. See some SVG strokes documentation.
noCurvesbooleanSet this to true if you want angles instead of curves
offsetnumberOptional number for space between element and start/end of stroke
arrowLengthnumberA size in px
arrowThicknessnumberA size in px
childrenReact.Node

ArcherElement

NameTypeDescription
idstringThe id that will identify the Archer Element. Should only contain alphanumeric characters and standard characters that you can find in HTML ids.
childrenReact.Node
relationsArray<Relation>

The Relation type has the following shape:

{
  targetId: string,
  targetAnchor: 'top' | 'bottom' | 'left' | 'right' | 'middle',
  sourceAnchor: 'top' | 'bottom' | 'left' | 'right' | 'middle',
  label: React.Node,
  style: Style,
}

Please note that the middle anchor does not look very good: the curve won't look nice and the arrow marker will have a little offset. The issue won't be solved before a long time.

The Style type has the following shape:

{
  strokeColor: string,
  strokeWidth: number,
  strokeDasharray: number,
  arrowLength: number,
  arrowThickness: number,
  noCurves: boolean,
}

TODO

  • Automatic anchoring option
  • Add a Code Sandbox