A React library for drawing customizable arrows and connectors between DOM elements.
React Archer is a React library that allows developers to draw arrows and connectors between DOM elements in their applications. It solves the problem of visually linking UI components, such as in diagrams, flowcharts, or interactive tutorials, by providing a declarative and customizable API. The library handles dynamic positioning and rendering of arrows, ensuring they update as elements change.
Frontend developers building React applications that require visual element connections, such as diagramming tools, flowchart builders, interactive tutorials, or any UI that needs to show relationships between components.
Developers choose React Archer for its simple, declarative API, extensive customization options for arrow styling, and built-in support for dynamic updates. It eliminates the need for manual SVG drawing or complex positioning logic, making it a lightweight and focused solution for connecting React elements.
🏹 Draw arrows between React elements 🖋
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Uses React components like ArcherContainer and ArcherElement to define relationships with props, making integration intuitive as shown in the example code.
Supports stroke color, width, dash patterns, line styles (curve, angle, straight), and end shapes (arrow, circle), allowing detailed visual control per the API docs.
Arrows automatically adjust when elements move or resize, with manual refreshScreen method for additional control in scenarios like scrolling.
Enables adding DOM attributes for hover effects, click handlers, and custom cursors, making arrows part of interactive UIs as detailed in the Relation type.
The README explicitly warns that the middle anchor has visual problems with curves and offsets, and it won't be fixed soon, limiting connection options.
For events like scrolling, developers must manually call refreshScreen, adding complexity and potential performance hits in dynamic applications.
Only supports simple line styles between fixed anchor points, lacking advanced features like multi-segment paths or automatic routing around obstacles.