Neural Processing Mechanisms

    TypeScript icon, indicating that this package has built-in type declarations

    0.5.7 • Public • Published


    GitHub release NPM release NPM downloads Build status

    A Sketch tool for React based applications, backed-up by FabricJS

    idea-image Please note that this module is still in development! Feel free to send me enhancements and ideas :)


    npm install react-sketch --save

    or with yarn

    yarn add react-sketch

    Source installation

    In order to build from source, read the relevant instructions first.

    Tested with node versions 6,7,8.


    Import the relevant SketchField component and use it, you can find more on the examples folder of the project

    import {SketchField, Tools} from 'react-sketch';
    class SketchFieldDemo extends React.Component {
         render() {
            return (
                <SketchField width='1024px' 

    Configuration Options

    Option Type Default Description
    tool Enumeration (string) pencil The tool to use, can be select, pencil, circle, rectangle, pan
    lineColor String black The color of the line
    lineWidth Number 1 The width of the line
    fillColor String transparent The fill color (hex format) of the shape when applicable (e.g. circle)
    backgroundColor String transparent The the background color of the sketch in hex or rgba
    undoSteps Number 15 number of undo/redo steps to maintain
    imageFormat String png image format when calling toDataURL, can be png or jpeg
    width Number No Value(null) Set/control the canvas width, if left empty the sketch will scale to parent element
    height Number 512 Set/control the canvas height, if left empty the sketch will take a reasonable default height
    value JSON Property to utilize and handle the sketch data as controlled component
    defaultValue JSON Default initial data, to load. If value is set then value will be loaded instead
    widthCorrection Number 2 Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style
    heightCorrection Number 0 Specify some height correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style

    Available tools

    Tool Description
    Pencil Free drawing pencil
    Line Gives you the ability to draw lines
    Rectangle Create rectangles
    Circle Create circles
    Rectangle Create Rectangles
    Select Disables drawing and gives you the ability to modify existing elements in the canvas
    Pan Disables drawing and gives you the ability to move the complete canvas at will, useful to adjust the canvas when zooming in or out (thank you wmaillard)


    The project includes a webpack server for running the examples, just run:

    git clone
    yarn install
    npm start

    and navigate to http://localhost:23000

    You can as well check the live showcase here:






    MIT, do remember to add a reference if you find it useful :)


    npm i react-sketch2

    DownloadsWeekly Downloads






    Unpacked Size

    380 kB

    Total Files


    Last publish


    • x5engine