react-svg-path v1.14.0

react-svg-path

react-svg-path makes composing svg elements dead simple. Everything is a path. Have fun.

There are more docs and interactive demos at https://joemaddalone.github.io/react-svg-path-docs/

Table of contents

• Installation
• Path
• toComponent
• Components
  • Shapes
    • Circle
    • Cross
    • Ellipse
    • Kite
    • Lens
    • Line
    • Omino
    • Polygon
    • Polygram
    • Polyline
    • RadialLines
    • Rect
    • RegPolygon
    • RoundedRect
    • RoundedSquare
    • Sector
    • Segment
    • Square
    • Star
    • SymH
    • SymI
    • SymX
    • Triangle
  • Curves
    • Arc
    • Cubic
    • Quad

Install

npm install --save react-svg-path

Path

import Path from 'react-svg-path'

react-svg-path is mostly helpful for building the commands needed for the "d" attribute of an svg path.

Most methods are direct translations from the SVG Path specification.

<path d="M0 0, L0 100"></path>

This path can be produced with:

const path = new Path().M(0,0).L(0,100);
console.log(path.toString()) // M0 0, L0 100

This library wraps https://github.com/joemaddalone/path and further documentation can be found there. All of the functionality of path is always available via import Path from 'react-svg-path' Please read the docs on path

toComponent

This library adds one additional rendering method to path called toComponent.

• toComponent(props)
  • returns a jsx function including attributes and props.

import React from 'react';
import Path, {Svg}  from 'react-svg-path';

const CustomSquare = ({ x, y, size }) => {
  const path = new Path()
    .moveTo(x, y) // move pen to x, y
    .right(size) // draw line right to relative "size" px
    .down(size) // draw line down to relative "size" px
    .left(size) // draw line left to relative "size" px
    .close() // draw line back to first point
  return path.toComponent({ fill: 'green'});
};

const App = () => {
  const width = 800;
  const height = 800;
  return (
    <Svg
      width={width}
      height={height}
    >
      <CustomSquare x={50} y={50} size={50} />
    </svg>
  );
};

Components

Writing path commands via the library makes creating paths super simple and intuitive. However it can seem like overkill for really common patterns you may need. react-svg-path includes a number of components to allow for a declarative interface for generating the paths you need.

Note: The following shorthand version of some props are available where applicable:

• sxy: sx & sy = sxy
• exy: ex & ey = exy
• cxy: cx & cy = cxy
• rxy: rx & cy = rxy

The following components are available

Shapes

Circle

→ Interactive demo of Circle

<Circle 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Cross

→ Interactive demo of Cross

<Cross 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Ellipse

→ Interactive demo of Ellipse

<Ellipse 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Kite

→ Interactive demo of Kite

<Kite 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  dh={number} 
  height={number} 
  width={number} 
/>

Lens

→ Interactive demo of Lens

<Lens 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Line

→ Interactive demo of Line

<Line 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  sx={number} 
  sy={number} 
/>

Omino

→ Interactive demo of Omino

<Omino 
  lined={boolean|default = false} 
  shape={2d-array} 
  size={number} 
  sx={number} 
  sy={number} 
/>

Polygon

→ Interactive demo of Polygon

<Polygon 
  points={point-array} 
/>

Polygram

→ Interactive demo of Polygram

<Polygram 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  points={number} 
  size={number} 
  vertexSkip={number|default = 2} 
/>

Polyline

→ Interactive demo of Polyline

<Polyline 
  points={point-array} 
  relative={boolean|default = false} 
/>

RadialLines

→ Interactive demo of RadialLines

<RadialLines 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  innerSize={number} 
  outerSize={number} 
  points={number} 
/>

Rect

→ Interactive demo of Rect

<Rect 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

RegPolygon

→ Interactive demo of RegPolygon

<RegPolygon 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  sides={number} 
  size={number} 
/>

RoundedRect

→ Interactive demo of RoundedRect

<RoundedRect 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  radius={number} 
  width={number} 
/>

RoundedSquare

→ Interactive demo of RoundedSquare

<RoundedSquare 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  radius={number} 
  size={number} 
/>

Sector

→ Interactive demo of Sector

<Sector 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  endAngle={number} 
  size={number} 
  startAngle={number} 
/>

Segment

→ Interactive demo of Segment

<Segment 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  endAngle={number} 
  size={number} 
  startAngle={number} 
/>

Square

→ Interactive demo of Square

<Square 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Star

→ Interactive demo of Star

<Star 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  innerSize={number} 
  outerSize={number} 
  points={number} 
/>

SymH

→ Interactive demo of SymH

<SymH 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

SymI

→ Interactive demo of SymI

<SymI 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

SymX

→ Interactive demo of SymX

<SymX 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  height={number} 
  width={number} 
/>

Triangle

→ Interactive demo of Triangle

<Triangle 
  centerEnd={boolean|default = true} 
  cx={number} 
  cy={number} 
  size={number} 
/>

Curves

Arc

→ Interactive demo of Arc

<Arc 
  arc={number|default = 0} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  rotation={number|default = 0} 
  rx={number} 
  ry={number} 
  sweep={number|default = 0} 
  sx={number} 
  sy={number} 
/>

Cubic

→ Interactive demo of Cubic

<Cubic 
  S={point-array} 
  cx1={number} 
  cx2={number} 
  cy1={number} 
  cy2={number} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  s={point-array} 
  sx={number} 
  sy={number} 
/>

Quad

→ Interactive demo of Quad

<Quad 
  T={point-array} 
  cx={number} 
  cy={number} 
  ex={number} 
  ey={number} 
  relative={boolean|default = false} 
  sx={number} 
  sy={number} 
  t={point-array} 
/>

License

MIT © joemaddalone