Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Rounded corners for path="grid" and gradients for colors #184

Open Totara-thib opened 1 year ago

Totara-thib commented 1 year ago

Possibility to have rounded corners in grid display I'm using your library to draw lines between elements, it's usefull for roadmap or things like that. Could be great to have rounded corners for the "grid" display, to achieve this kinds of display: image

Describe the solution you'd like We could have a new prop rounded

<Xarrow
     ...props
     rounded={10}
/>

Describe alternatives you've considered We could use the already existing curveness but it will also be applied to grid display

<Xarrow
     ...props
     curveness={1}
/>

Possibility to put gradient colors To beautify the design of lines, it could be great to insert gradient colors ( Example in the first screenshot )

Describe the solution you'd like We could just put a gradient definition in the color prop

<Xarrow
     ...props
     color={"linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"}
/>

Thanks again @Eliav2 for your great package, i couldn't found others alternative and i love using it.