Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbolis/react-sketch
Sketch Tool for React-based applications, backed up by FabricJS
https://github.com/tbolis/react-sketch
draw drawing fabricjs paint react sketch
Last synced: about 2 months ago
JSON representation
Sketch Tool for React-based applications, backed up by FabricJS
- Host: GitHub
- URL: https://github.com/tbolis/react-sketch
- Owner: tbolis
- License: mit
- Created: 2016-02-04T11:01:04.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:51:55.000Z (about 2 years ago)
- Last Synced: 2024-10-19T18:48:10.407Z (about 2 months ago)
- Topics: draw, drawing, fabricjs, paint, react, sketch
- Language: JavaScript
- Homepage: http://tbolis.github.io/showcase/react-sketch/
- Size: 1.87 MB
- Stars: 683
- Watchers: 13
- Forks: 230
- Open Issues: 77
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-canvas - react-sketch - sketch/)] - Sketch Tool for React-based applications, backed up by FabricJS.   (Libraries / Canvas draw)
- awesome-react-components - react-sketch - A Sketch tool for React based applications, backed-up by FabricJS (UI Components / Canvas)
- awesome-react - react-sketch - A Sketch tool for React based applications, backed-up by FabricJS.  (UI Components / Canvas)
- awesome-react-components - react-sketch - A Sketch tool for React based applications, backed-up by FabricJS (UI Components / Canvas)
- fucking-awesome-react-components - react-sketch - A Sketch tool for React based applications, backed-up by FabricJS (UI Components / Canvas)
README
# react-sketch
[![GitHub release][github-image]][github-url]
[![NPM release][npm-image]][npm-url]
[![NPM downloads][downloads-image]][downloads-url]
[![Build status][travis-image]][travis-url]
A Sketch tool for React based applications, backed-up by [FabricJS](http://fabricjs.com/)
![idea-image] _Please note that this module is still in development! Feel free to send me enhancements and ideas :)_
## Installation
```sh
npm install react-sketch --save
```
or with yarn
```sh
yarn add react-sketch
```
### Source installation
In order to build from source, read the [relevant instructions](http://fabricjs.com/fabric-intro-part-4#node) first.
Tested with node versions 6,7,8.
## Usage
Import the relevant SketchField component and use it, you can find more on the examples folder of the project
```javascript
import {SketchField, Tools} from 'react-sketch';
class SketchFieldDemo extends React.Component {
render() {
return (
)
}
}
```
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](https://github.com/wmaillard)) |
## Examples
The project includes a webpack server for running the examples, just run:
```sh
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/
## Issues
See https://github.com/tbolis/react-sketch/issues
## Changelog
See https://github.com/tbolis/react-sketch/blob/master/CHANGELOG.md
## License
MIT, do remember to add a reference if you find it useful :)
[warning-image]: /docs/img/warning.png
[idea-image]: /docs/img/idea.png
[github-image]: https://img.shields.io/github/release/tbolis/react-sketch.svg
[github-url]: https://github.com/tbolis/react-sketch/releases
[npm-image]: https://img.shields.io/npm/v/react-sketch.svg
[npm-url]: https://www.npmjs.com/package/react-sketch
[downloads-image]: https://img.shields.io/npm/dm/react-sketch.svg
[downloads-url]: https://www.npmjs.com/package/react-sketch
[travis-image]: https://img.shields.io/travis/tbolis/react-sketch.svg
[travis-url]: https://travis-ci.org/tbolis/react-sketch