react-curved-arrow

Fancy curved arrows for your React project! Great for tutorials and product tours!

https://react-curved-arrow.nickjanssen.com/

Installation

yarn add react-curved-arrow

Usage

import CurvedArrow from "react-curved-arrow";

// Usage
<CurvedArrow />

Props

Name	Type	Description	Default
fromSelector	DOM selector	DOM element from which your arrow will start.	body
fromOffsetX	number	Amount of pixels to offset the arrow from the DOM element on the X axis.	0
fromOffsetY	number	Amount of pixels to offset the arrow from the DOM element on the Y axis.	0
toSelector	DOM selector	DOM element to which your arrow will go to.	(same as fromSelector)
toOffsetX	number	Amount of pixels to offset the arrow from the DOM element on the X axis.	0
toOffsetY	number	Amount of pixels to offset the arrow from the DOM element on the Y axis.	0
middleX	number	Middle point X position.	0
middleY	number	Middle point Y position.	0
width	number	Width of the arrow and arrowhead.	8
color	color	Color of the arrow and arrowhead.	"black"
hideIfFoundSelector	DOM selector	Optional. 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.
debugLine	boolean	Show debug dots and lines for fromOffset, toOffset and middle vectors.	false
dynamicUpdate	boolean	Automatically 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
zIndex	number	Adjust the z-index for this arrow.	0

Try it out!

Open in Playground

Open in CodeSandbox

Made with ❤️ by Nick Janssen

Also check out Styled Page, a tool that lets you visually build React apps & components!

License

MIT