A fancy React Component that creates nice curvy arrows between elements using canvas.
Ideal for tutorials and product/app tours.
Install and Import:
# Yarn $ yarn add react-curved-arrow # NPM $ npm i react-curved-arrow --save
import CurvedArrow from "react-curved-arrow";
Basic Usage:
const App = () => { return ( <div className="wrapper"> <div className="from" /> <div className="to" /> <CurvedArrow fromSelector=".from" toSelector=".to" middleY={40} /> </div> ); }; ReactDOM.render(<App />, document.getElementById("root"));
Default props:
fromSelector = "body", toSelector = fromSelector, fromOffsetX = 0, fromOffsetY = 0, toOffsetX = 0, toOffsetY = 0, middleX = 0, middleY = 0, width = 8, color = "black", hideIfFoundSelector, debugLine = false, dynamicUpdate = false, zIndex = 0
Preview:
Download Details:
Author: nickjanssen
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/nickjanssen/react-curved-arrow
License: MIT