https://github.com/nickjanssen/react-curved-arrow
Fancy curvy arrows for your React project! Great for tutorials and product tours!
https://github.com/nickjanssen/react-curved-arrow
Last synced: 12 months ago
JSON representation
Fancy curvy arrows for your React project! Great for tutorials and product tours!
- Host: GitHub
- URL: https://github.com/nickjanssen/react-curved-arrow
- Owner: nickjanssen
- Created: 2020-02-26T10:25:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-20T15:03:02.000Z (over 2 years ago)
- Last Synced: 2025-03-24T08:09:09.887Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-curved-arrow.nickjanssen.com/
- Size: 400 KB
- Stars: 203
- Watchers: 2
- Forks: 14
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - react-curved-arrow
README
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
```jsx
import CurvedArrow from "react-curved-arrow";
// Usage
```
## 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 CodeSandbox](https://codesandbox.io/s/wild-wave-32jt9)
Made with ❤️ by [Nick Janssen](https://twitter.com/nickjanssen_com)
## Special thanks
Special thanks to [prscoelho](https://github.com/prscoelho) for his `quadraticCurveMinMax` implementation!
# License
MIT