piccir-react-canvas-sketch
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

React Sketch Canvas


Freehand vector drawing tool for React using SVG as canvas 🖌



npm    NPM    npm
npm bundle size    npm bundle size
This project was generated using Nx.

Overview

Features

  • Supports Desktop and Mobile.
  • Accepts input from Mouse, touch, and graphic tablets.

Requirements

  • Requires React >= 16.4
  • Depends on Immer

Wanna test React Sketch Canvas before using it?

Installation

If you use npm

npm i react-sketch-canvas

or with yarn

yarn add react-sketch-canvas

Example

Common usage example

import 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 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>
    );
  }
};

List of Props

Props Expected datatype Default value Description
className PropTypes.string "" Class for using with CSS selectors
width PropTypes.string 100% canvas width (em/rem/px)
height PropTypes.string 100% canvas width (em/rem/px)
canvasColor PropTypes.string white canvas color (HTML colors)
background PropTypes.string '' Set SVG background using CSS background value
strokeColor PropTypes.string black Pen color
strokeWidth PropTypes.number 4 Pen stroke size
eraserWidth PropTypes.number 8 Erase size
allowOnlyPointerType PropTypes.string all allow pointer type ("all"/"mouse"/"pen"/"touch")
onUpdate PropTypes.func all Returns the current sketch path in CanvasPath type on every update
withTimestamp PropTypes.bool false Add timestamp to individual strokes for measuring sketching time

Set SVG background using CSS background value

You can specify width and height values in em or rem. It fills the parent element space if width and height are not set

Example

<ReactSketchCanvas width="25em" height="10rem" />

Styling

You can pass a CSS in JS style object to style the element. By default it has a border with following properties

canvas {
  border: 0.0625rem solid #9c9c9c;
  border-radius: 0.25rem;
}

Example

<ReactSketchCanvas
  style={{
    border: "0.0625rem solid #9c9c9c",
  }}
/>

Functions

You can export the sketch as an image or as a svg

Use ref to access the element and call the following functions to export image

Props Expected datatype
eraseMode(boolean) Switch to eraser mode by passing true. You can switch back to pen mode by passing false
clearCanvas() Clears the canvas.
resetCanvas() Resets the canvas and clears the undo/redo stack along with it.
undo() Undo the last action.
redo() Redo the previous action.
exportImage(imageTypeString) Accepts an image type as argument (ExportImageType) and returns a Promise which resolves to base64 data url of the sketch.
exportSvg() returns a Promise which resolves to an inline SVG element.
exportPaths() returns a Promise which resolves to an instance of CanvasPath.
loadPaths(CanvasPath) Accepts an CanvasPath exported from exportPaths() and loads it on the canvas.
getSketchingTime() returns a Promise which resolves the time that user sketched in the canvas (considers only when the user made the strokes or erased the strokes)

Types

type ExportImageType = "jpeg" | "png";

interface Point {
  x: number;
  y: number;
}

interface CanvasPath {
  paths: Point[];
  strokeWidth: number;
  strokeColor: string;
  drawMode: boolean;
  startTimestamp?: number;
  endTimestamp?: number;
}

Thanks to


Package Sidebar

Install

npm i piccir-react-canvas-sketch

Weekly Downloads

2

Version

0.0.4

License

MIT

Unpacked Size

232 kB

Total Files

12

Last publish

Collaborators

  • sven-ahmed