react-svg-pathline
v0.6.0
Published
React component for drawing SVG path through set of points, rendering straight lines where possible and smooth corners in other cases
Downloads
21,974
Maintainers
Readme
react-svg-pathline
React component for drawing SVG path through set of points, smoothing the corners
Why?
SVG polyline
is the simplest option for rendering "path" line through set of known points but it gives you a "broken" line with sharp corners.
Using SVG path
you can get smooth corners but it requires adding more points to original set.
This component helps with rendering SVG path by generating correct SVG data from original set of points, producing "smooth path line" as result.
So instead of this:
<svg>
<polyline
points="0,0 125,0 125,125 250,125"
stroke="red"
strokeWidth="3"
fill="none" />
</svg>
You get this:
import React from 'react'
import {PathLine} from 'react-svg-pathline'
export class MyComponent extends React.Component {
render() (
<svg>
<PathLine
points={[{x:0, y:0}, {x:125, y: 0}, {x:125, y:125}, {x:250, y:125}]}
stroke="red"
strokeWidth="3"
fill="none"
r={10}
/>
</svg>
)
}
Installation
Requires nodejs.
$ npm install react-svg-pathline
Live Example
$ npm i && npm i react react-dom && npm start
Open a browser at localhost:8080