react-sketch-whiteboard-teacherly

Sketch Element for React based applications, backed-up by fabricjs as its core

Usage no npm install needed!

<script type="module">
  import reactSketchWhiteboardTeacherly from 'https://cdn.skypack.dev/react-sketch-whiteboard-teacherly';
</script>

README

React-sketch-whiteboard-tool

Forked from nakusyat/react-sketch And from tboils/react-sketch

Info

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

Installation

npm install react-sketch-whiteboard-tool --save

or with yarn

yarn add react-sketch-whiteboard-tool

Usage

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

import { SketchField, Tools } from 'eact-sketch-whiteboard-tool';

class SketchFieldDemo extends React.Component {
     render() {
        return (
            <SketchField width='1024px' 
               height='768px' 
               tool={Tools.Pencil} 
               lineColor='black'
               lineWidth={3}
            />
        )
     }
}

Examples

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

git clone https://github.com/tbolis/react-sketch.git
yarn install
npm start

and navigate to http://localhost:23000

You can as well check the live showcase here: http://tbolis.github.io/showcase/react-sketch/

Additional info

  • Added disableMultipleSelection prop for disable multiple selection