Never Pay your Mortgage

    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


    Install

    npm i piccir-react-canvas-sketch

    DownloadsWeekly Downloads

    5

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    232 kB

    Total Files

    12

    Last publish

    Collaborators

    • sven-ahmed