react-drawable-overlay
A package for wrapping an element with a drawable canvas.
Install
$ npm install --save react-drawable-overlay$ yarn add react-drawable-overlay
Usage
import React Component from "react"import DrawableOverlay useStage from "react-drawable-overlay" const Content = const stage = return <React.Fragment> <div => stage </div> <p> Content that cannot be drawn on but still has access to the Context-values </p> <Toolbar /> </React.Fragment> const Example = return <DrawableOverlay ="#000"> <Content /> </DrawableOverlay>
Props
Prop | Type | Default | Description |
---|---|---|---|
initialInDrawMode |
boolean |
false |
Whether or not you can draw on the stage. |
defaultBrushColor |
string |
#000000 |
Hexadecimal color on the initial render. |
children |
node /node[] |
undefined |
All children have access to the context. |
heightOffset |
number |
0 |
Used to narrow down drawable area in y-axis. |
widthOffset |
number |
0 |
Used to narrow down drawable area in x-axis. |
onAddToHistory |
function(string/undefined) |
undefined |
Callback on brush stroke. |
State Context
Key | Type | Description |
---|---|---|
drawMode |
"brush" /"eraser" |
Current draw mode. |
brushSize |
number |
Current size for the brush-tool. |
eraserSize |
number |
Current size for the eraser-tool. |
brushColor |
string |
Hexadecimal color. |
inDrawMode |
boolean |
Whether or not the stage can be drawn on. |
Utils Context
Key | Type | Description |
---|---|---|
reset |
function() |
Clear canvas. This also resets history and currentHistoryIndex . |
setInitialDrawing |
function(string) |
Set a base-64 image as the initial drawing. Takes a base-64 image as an argument. |
setDrawMode |
function("brush" /"eraser") |
Set drawMode . |
setBrushSize |
function(number) |
Set brushSize . |
setEraserSize |
function(number) |
Set eraserSize . |
setBrushColor |
function(string) |
Set brushColor . Takes a hexadecimal color as an argument. |
setInDrawMode |
function(boolean) |
Set inDrawMode . |
History Context
Key | Type | Description |
---|---|---|
undo |
function() |
Undo latest brush stroke or eraser stroke. |
redo |
function() |
Redo latest brush stroke or eraser stroke. |
currentHistoryIndex |
number |
Current index in history . |
history |
string[] |
Array of base-64 images. |
Example
See the example-folder for an example on how to use the package.
License
MIT © SAITS