A package for wrapping elements with a drawable canvas.
npm install react-drawable-overlay> A package for wrapping an element with a drawable canvas.
 
``bash`
$ npm install --save react-drawable-overlay
$ yarn add react-drawable-overlay
`jsx
import React, { Component } from "react"
import { DrawableOverlay, useStage } from "react-drawable-overlay"
const Content = () => {
const stage = useStage()
return (
{stage}
Content that cannot be drawn on but still has access to the
Context-values
)
}
const Example = () => {
return (
)
}
`
| 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. |
| 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. |
| 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. |
| 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. |
See the example-folder for an example on how to use the package.
MIT © SAITS