React-drawable-overlay NPM

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.