Nutrias Punching Marmots

    react-svg-pathline

    0.5.0 • Public • Published

    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

    Install

    npm i react-svg-pathline

    DownloadsWeekly Downloads

    1,905

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • aleksandr.sugak