Skip to content
Simple sketch board that allows to draw lines, rectangles and paths
TypeScript HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.gitignore
.npmignore
README.md
package-lock.json
package.json
tsconfig.json

README.md

react-simple-sketch

npm version

Simple sketch board that allows drawing lines, rectangles and paths.

Check the DEMO

How to use

Install

Run yarn add react-simple-sketch or npm install react-simple-sketch

Use

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}
/>

Properties

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

Running example

cd example/
yarn start

Todo

  1. Responsive version
You can’t perform that action at this time.