Fancy Curvy Arrows For React

Description:

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: