A Sketch tool for React based applications, backed-up by FabricJS
Please note that this module is still in development! Feel free to send me enhancements and ideas :)
npm install react-sketch --saveIn order to build from source, read the relevant instructions first.
On an ubuntu machine perform the following steps to install, node version should be >=4 , tested with versions 4,5,6 (see travis-ci). This is only for installation (npm install) we can then change back to a newer stable node version
$ sudo apt-get install libcairo2-dev libjpeg-dev libgif-dev
$ sudo npm install -g canvas
$ npm installImport 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'
height='768px'
tool={Tools.Pencil}
color='black'
lineWidth={3}/>
)
}
}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 |
| defaultData | JSON or data URL | Default initial data, can be json or URL data accroding to configuration option below, in the case of data URL the initial drawing will be imported as an image | |
| defaultDataType | Enumeration (string) | json | The Type of initial data, can be either json or url |
| 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 |
| 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 https://github.com/tbolis/react-sketch.git
npm install
npm startand navigate to http://localhost:9999
You can as well check the live showcase here: http://tbolis.github.io/showcase/react-sketch/
See https://github.com/tbolis/react-sketch/issues
See https://github.com/tbolis/react-sketch/blob/master/CHANGELOG.md
MIT, do remember to add a reference if you find it useful :)