React Sketch Canvas

6.2.0 · active · verified Sun Apr 19

react-sketch-canvas is a React component designed for freehand vector drawing, leveraging SVG as its rendering canvas. It provides a declarative interface for integrating drawing capabilities into React applications, supporting actions like drawing, erasing, undoing, and redoing strokes. The library allows for customization of stroke properties and offers functionality to export the drawn content as SVG paths or various image formats (PNG, JPEG). The current stable version is 6.2.0, with active development on a 7.0.0-next branch, indicating ongoing maintenance and feature additions. Its primary differentiators include its SVG-based output, which ensures resolution independence, a straightforward React component API, and built-in essential drawing features without relying on pixel-based HTML Canvas APIs.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a functional React component using `react-sketch-canvas`. It includes basic drawing, dynamically changing stroke color and width, and imperative controls for clearing, undoing, redoing, and exporting the canvas content as a PNG image.

import React, { useRef, useState } from 'react';
import { ReactSketchCanvas, ReactSketchCanvasRef } from 'react-sketch-canvas';

const DrawingApp: React.FC = () => {
  const canvasRef = useRef<ReactSketchCanvasRef>(null);
  const [strokeColor, setStrokeColor] = useState('#000000');
  const [strokeWidth, setStrokeWidth] = useState(4);

  const handleClear = () => {
    if (canvasRef.current) {
      canvasRef.current.clearCanvas();
    }
  };

  const handleUndo = () => {
    if (canvasRef.current) {
      canvasRef.current.undo();
    }
  };

  const handleRedo = () => {
    if (canvasRef.current) {
      canvasRef.current.redo();
    }
  };

  const handleExport = async () => {
    if (canvasRef.current) {
      const image = await canvasRef.current.exportImage('png');
      // For demonstration, log the base64 image or trigger a download
      console.log('Exported PNG (base64):', image);
      // To trigger a download:
      // const a = document.createElement('a');
      // a.href = image;
      // a.download = 'sketch.png';
      // document.body.appendChild(a);
      // a.click();
      // document.body.removeChild(a);
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h1>My Sketchpad</h1>
      <div style={{ marginBottom: '10px' }}>
        <label htmlFor="strokeColor">Color: </label>
        <input
          id="strokeColor"
          type="color"
          value={strokeColor}
          onChange={(e) => setStrokeColor(e.target.value)}
        />
        <label htmlFor="strokeWidth" style={{ marginLeft: '15px' }}>Width: </label>
        <input
          id="strokeWidth"
          type="range"
          min="1"
          max="20"
          value={strokeWidth}
          onChange={(e) => setStrokeWidth(Number(e.target.value))}
        />
      </div>
      <ReactSketchCanvas
        ref={canvasRef}
        strokeWidth={strokeWidth}
        strokeColor={strokeColor}
        canvasColor="#FFFFFF"
        width="600px"
        height="400px"
        style={{ border: '1px solid #ccc', borderRadius: '5px' }}
      />
      <div style={{ marginTop: '10px' }}>
        <button onClick={handleClear} style={{ marginRight: '5px' }}>Clear</button>
        <button onClick={handleUndo} style={{ marginRight: '5px' }}>Undo</button>
        <button onClick={handleRedo} style={{ marginRight: '5px' }}>Redo</button>
        <button onClick={handleExport}>Export PNG</button>
      </div>
    </div>
  );
};

export default DrawingApp;

view raw JSON →