Drawing arrows between DOM elements in React JS using react-archer

In this article, we will see how to draw flowchart-like arrows to connect different DOM elements in React JS. You can use this feature to create a unique web design. Here we will use the react-archer package to draw arrows to connect the DOM elements.

A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.


First create a React project −

npx create-react-app tutorialpurpose

Now go to the project directory −

cd tutorialpurpose

Download and install the react-archer package −

npm install react-archer

We will use the react-archer package to add arrows and connect the different DOM elements.

Now, insert the following lines of code in App.js: −

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 style={{ height: "500px", margin: "50px" }}>
         <ArcherContainer strokeColor="red">
            <div style={rootStyle}>
                        targetId: "element2",
                        targetAnchor: "top",
                        sourceAnchor: "bottom",
                        style: { strokeDasharray: "5,5" },
                <div style={boxStyle}>Root</div>
            <div style={rowStyle}>
                     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 id="element3">
                   <div style={boxStyle}>Element 3</div>

                       targetId: "root",
                       targetAnchor: "right",
                       sourceAnchor: "left",
                       label: "Arrow 3",
            <div style={boxStyle}>Element 4</div>
export default App;


The concept is simple. We created an Archer element inside which we have our DOM.

Each Archer element will have a unique ID, and a relation attribute which will indicate many things like −

  • from which part of source DOM the arrow should generate,

  • the target DOM where the arrow should point, and

  • at which side the arrow should point, etc.

All these things will be defined inside the relation attribute.


On execution, it will produce the following output −

Updated on: 29-Sep-2021

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started