- Supports Desktop and Mobile.
- Accepts input from Mouse, touch, and graphic tablets.
- Requires React >= 16.8
- Try here
If you use npm
npm i react-sketch-canvas
or with yarn
yarn add react-sketch-canvas
Common usage example
import * as React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
};
const Canvas = () => {
return (
<ReactSketchCanvas
style={styles}
width="600"
height="400"
strokeWidth={4}
strokeColor="red"
/>
);
};
To export Data URL of your sketch use ref
import * as React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
};
const Canvas = class extends React.Component {
constructor(props) {
super(props);
this.canvas = React.createRef();
}
render() {
return (
<div>
<ReactSketchCanvas
ref={this.canvas}
strokeWidth={5}
strokeColor="black"
/>
<button
onClick={() => {
this.canvas.current
.exportImage("png")
.then((data) => {
console.log(data);
})
.catch((e) => {
console.log(e);
});
}}
>
Get Image
</button>
</div>
);
}
};
type ExportImageType = "jpeg" | "png";
interface Point {
x: number;
y: number;
}
interface CanvasPath {
paths: Point[];
strokeWidth: number;
strokeColor: string;
drawMode: boolean;
startTimestamp?: number;
endTimestamp?: number;
}