React js package to draw simple shapes like line, circle, rectangle etc.
npm install draw-shape-reactjsSimple react component to draw shapes like
- Line
- SteppedLine
- PolyLine
- Circle
- Rectangle
- Free form shape with lines
```
npm install draw-shape-reactjs
`js
import React from 'react';
import {
Line,
SteppedLine,
PolyLine,
Circle,
Rectangle
} from 'draw-shape-reactjs';
function App() {
return (
export default App;
`
React component prop. types:
- from:
- Type: array
- Required: true
- Description: Start point of the line [x, y]. x, y is calulated from top-left corner
- to:
- Type: array
- Required: true
- Description: End point of the line [x, y]. x, y is calulated from top-left corner
- lineWeight:
- Type: number
- Required: false
- Description: Width of the shape, default value is 3
- color:
- Type: string
- Required: false
- Description: Color of the shape, default value is '#000000'
- zIndex:
- Type: number
- Required: false
- Description: zindex of the shape, default value is 10
- position:
- Type: string
- Required: false
- Description: Position type for the shape. It can be either 'absolute' of 'fixed', default value is 'absolute'
React component prop. types:
- from:
- Type: array
- Required: true
- Description: Start point of the line [x, y]. x, y is calulated from top-left corner
- to:
- Type: array
- Required: true
- Description: End point of the line [x, y]. x, y is calulated from top-left corner
- lineWeight:
- Type: number
- Required: false
- Description: Width of the shape, default value is 3
- color:
- Type: string
- Required: false
- Description: Color of the shape, default value is '#000000'
- zIndex:
- Type: number
- Required: false
- Description: zindex of the shape, default value is 10
- position:
- Type: string
- Required: false
- Description: Position type for the shape. It can be either 'absolute' of 'fixed', default value is 'absolute'
React component prop. types:
- points:
- Type: array
- Required: true
- Description: All the points of the line, it should be an array of arrays like [[x1, y1], [x2, y2], [x3, y3]]
- lineWeight:
- Type: number
- Required: false
- Description: Width of the shape, default value is 3
- color:
- Type: string
- Required: false
- Description: Color of the shape, default value is '#000000'
- zIndex:
- Type: number
- Required: false
- Description: zindex of the shape, default value is 10
- position:
- Type: string
- Required: false
- Description: Position type for the shape. It can be either 'absolute' of 'fixed', default value is 'absolute'
React component prop. types:
- center:
- Type: array
- Required: true
- Description: Center of the circle [x, y]. x, y is calulated from top-left corner.
- radius:
- Type: number
- Required: true
- Description: Radius of the circle
- lineWeight:
- Type: number
- Required: false
- Description: Width of the shape, default value is 3
- color:
- Type: string
- Required: false
- Description: Color of the shape, default value is '#000000'
- zIndex:
- Type: number
- Required: false
- Description: zindex of the shape, default value is 10
- position:
- Type: string
- Required: false
- Description: Position type for the shape. It can be either 'absolute' of 'fixed', default value is 'absolute'
React component prop. types:
- corner:
- Type: array
- Required: true
- Description: Top-Left corner [x, y] of the rectangle. x, y is calulated from top-left corner.
- height:
- Type: number
- Required: true
- Description: Height of the rectangle
- width:
- Type: number
- Required: true
- Description: Width of the rectangle
- lineWeight:
- Type: number
- Required: false
- Description: Width of the shape, default value is 3
- color:
- Type: string
- Required: false
- Description: Color of the shape, default value is '#000000'
- zIndex:
- Type: number
- Required: false
- Description: zindex of the shape, default value is 10
- position`:
- Type: string
- Required: false
- Description: Position type for the shape. It can be either 'absolute' of 'fixed', default value is 'absolute'