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 = useStage()

  return (
    <React.Fragment>
      <div style={{ position: "relative", height: 500, width: 500 }}>
        {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 initialInDrawMode defaultBrushColor="#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