react-svg-pathline

React component for drawing SVG path through set of points, rendering straight lines where possible and smooth corners in other cases

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-svg-pathline
4310.5.05 years ago6 years agoMinified + gzip package size for react-svg-pathline in KB

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>

polyline
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>
  )
}

pathline

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