@rchaser53/react-snake-arrow

arrows

Simple SVG Arrow Component.

Basic

import React from 'react';
import ReactDOM from 'react-dom'
import Arrow from 'react-snake-arrow'

class Example extends React.Component{
	render() {
		return (
			<div>
				<Arrow startPoint={{x: 10, y: 20}} endPoint={{x: 150, y: 200}}
					option={{duration: 2000, stroke: 'red', strokeWidth: 3}} />
			</div>
		);
	}
}
ReactDOM.render(
	<Example />,
	document.querySelector('#app')
);

Properties

stroke {string}

The color of the arrow.

strokeWidth {number}

The width of the arrow.

duration {number}

The time of animation.