Screenshot-editor-test NPM

Install

npm install --save screenshot-editor-test

Usage

import React, { Component } from "react";

import Editor from "screenshot-editor-test";

class Example extends Component {
  render() {
    return (
      <Editor
        imgSrc="https://i.imgur.com/aZO5Kol.jpeg"
        onDrawingEnd={this.onDrawingEnd}
        lineWidth={5}
      />
    );
  }
}

Properties

Name	Type	Default	Description
`imgSrc`	`string`		A string representing the source to screenshot . ( `Required` )
`onDrawingEnd`	`function`		A mouseup listner on the image returns the updated image on every mouseup.( `Required` )
`lineWidth`	`Number`	`5`	A Number representing the line width of drawing
`configs`	`Array`	`[]`	An array representing the `editor controls`. and it must follow the `###config structure`

configs structure

Name	Type	Default	Description
`role`	`string`		A string representing the role, should be from the list of `rect`,`line`,`circle`,`pencil`,`text`,`undo`,`eraser`,`color` . ( `Required` )
`icon`	`image`		Imported icon, it will be rendered as an image in lib .( `Required` )
`colors`	`array`	[]	An array for adding extra color in the color list.( `Required` )

role

role	operation
`rect`	It will add a function for drawing `rectangle`
`line`	It will add a function for drawing `line`
`circle`	It will add a function for drawing `circle`
`pencil`	It will add a function for drawing `pencil`
`color`	It will add a function for selecting the `color`
`text`	It will add a function for adding `text`
`undo`	It will add a function for `undo`
`eraser`	It will add a function for `eraser`

Example configs prop

const configData = [
  {
    icon: undoIcon,
    role: "undo"
  },
  {
    role: "rect",
    icon: squareIcon
  },
  {
    role: "line",
    icon: moveIcon
  },
  {
    role: "circle",
    icon: elipseIcon
  },
  {
    role: "color",
    icon: bucketIcon,
    extraColors: ["#ff0000", "#ff3333"]
  },
  {
    role: "pencil",
    icon: pencilIcon
  },
  {
    icon: textIcon,
    role: "text"
  },
  {
    icon: eraserIcon,
    role: "eraser"
  }
];

with configs props

import React from "react";

import Editor from "screenshot-editor-test";

const Example = () =>  {

    return (
      <Editor
        imgSrc="https://i.imgur.com/aZO5Kol.jpeg"
        onDrawingEnd={this.onDrawingEnd}
        lineWidth={5}
        configs={configData}
      />
    );
}