react-drawable-overlay
Version:
A package for wrapping elements with a drawable canvas.
99 lines (75 loc) • 4.72 kB
Markdown
# react-drawable-overlay
> A package for wrapping an element with a drawable canvas.
[](https://www.npmjs.com/package/react-drawable-overlay) [](https://standardjs.com)
## Install
```bash
$ npm install --save react-drawable-overlay
$ yarn add react-drawable-overlay
```
## Usage
```jsx
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
<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
| 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
<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
| 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](https://github.com/SAITS)