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.

Example

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}>
               <ArcherElement
                   id="root"
                   relations={[
                     {
                        targetId: "element2",
                        targetAnchor: "top",
                        sourceAnchor: "bottom",
                        style: { strokeDasharray: "5,5" },
                      },
                  ]}
                >
                <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;

Explanation

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.

Output

On execution, it will produce the following output −