Skip to content

Latest commit

 

History

History
98 lines (75 loc) · 4.61 KB

README.md

File metadata and controls

98 lines (75 loc) · 4.61 KB

react-drawable-overlay

A package for wrapping an element with a drawable canvas.

NPM JavaScript Style Guide

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