react-curved-arrow
Use nice curvy arrows in your React project!
Great for interactive tutorials and product tours!
Installation
yarn add react-curved-arrow
Usage
import CurvedArrow from "react-curved-arrow";

// Usage
<CurvedArrow />
Props
NameTypeDescriptionDefault
fromSelectorDOM selectorDOM element from which your arrow will start.body
fromOffsetXnumberAmount of pixels to offset the arrow from the DOM element on the X axis.0
fromOffsetYnumberAmount of pixels to offset the arrow from the DOM element on the Y axis.0
toSelectorDOM selectorDOM element to which your arrow will go to.(same as fromSelector)
toOffsetXnumberAmount of pixels to offset the arrow from the DOM element on the X axis.0
toOffsetYnumberAmount of pixels to offset the arrow from the DOM element on the Y axis.0
middleXnumberMiddle point X position.
0
middleYnumberMiddle point Y position.
0
widthnumberWidth of the arrow and arrowhead.8
colorcolorColor of the arrow and arrowhead."black"
hideIfFoundSelectorDOM selectorOptional. if the arrow can find this selector, it will hide itself. Useful for product tours when you only want to show an arrow whenever a user hasn't performed an action yet such as opening a menu.
debugLinebooleanShow debug dots and lines for fromOffset, toOffset and middle vectors.false
dynamicUpdatebooleanAutomatically adjust the arrow whenever the from/to DOM elements update. Useful for dynamic content such as sliding menus or content that is within a scrolling container.false
zIndexnumberAdjust the z-index for this arrow.0
Try it out!
Made with ❤️ by Nick Janssen
PS: Wanna build a page like this?
Check out Styled Page!