screenshot-editor-test

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}
      />
    );
}

License

MIT © errorr404