Simple sketch board that allows drawing lines, rectangles and paths.
Run yarn add react-simple-sketch or npm install react-simple-sketch
import SimpleSketch from "react-simple-sketch";
<SimpleSketch
tool={this.state.tool}
lineColor={this.state.color}
lineWidth={this.state.lineWidth}
width={600}
height={300}
style={{
border: "2px solid #000",
borderRadius: "5px"
}}
onChange={this.onSketchBoardChange}
value={this.state.objects}
/>
| Property | Type | Required |
|---|---|---|
| tool | "line" | "rect" | "path | yes |
| width | number | no |
| height | number | no |
| lineWidth | number | no |
| lineColor | string (hex) | no |
| style | React.CSSProperties | no |
| onChange | (objects: ShapeObject) => void | no |
| value | ShapeObject[] | no |
cd example/
yarn start
- Responsive version
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent