whizsid/react-designer-component

A server side renderable react designer canvas

---

---

A server side renderable react canvas.

Features

• Get all items as objects
• Add texts, images, rectangles and circles
• You can draw your own shapes by using lines and brush
• Enable or disable features

Watch Demo >>

Installation

You can install this component using yarn or npm

//yarn
$ yarn add react-designer-component

//npm
$ npm install react-designer-component --save

Usage

import Designer from 'react-designer-component';

...
class App extends Component {

 constructor(props){
	super(props);

	this.state = {items:[]}
 }

 handleChangeItems = (items)=>{
 	this.setState({items})
 }

 render(){
	return (
		<Designer
			items={items}
			onChangeItems={this.handleChangeItems}
			fontApiKey="API_KEY"
			paperSize={{
				height: 300,
				width: 600
			}}
		/>
	)
 }
}

Documentation

Please provide following props.

Prop	Description	Type
*items	If you want to initialize the designer with a blank page provide an empty array. Otherwise provide an array with DesignerItems	Array with ImageItem, CircleItem, RectangleItem, LineItem, TextItem, BrushItem
*onChangeItems	This callback function will calling when changing items.	(items:DesignerItem)=>void
className	CSS class name to apply the for the root element	string
features	You can enable/disable features by passing an object.	Object that containing boolean values for text,brush,image,circle,rectangle,line properties. All properties are optional.
classes	You can override all CSS classes by passing an Object	Please look at this file to see all CSS classes. All properties are optional.
fontApiKey	Google Font API Key if you using the text feature. All fonts loading from google.	string
paperSize	Size of the paper.	Object with width:number and height:number properties. Default values are 300 pixel height and 600 pixel width.
drawingArea	Supply coordinates of a polygon if you want a custom shape other than a rectangle.	Array of positions. Ex:- [{left:300,right:400},...]

ImageItem

You can find following properties in an image item.

• rotate:number Current degree value
• outlineColor:string Color of the outline as a rgba string. `rgba(210,210,120,0.7)
• outlineWeight:number Weight of the outline as a pixel value.
• position: Position Current position of the image. This object has two properties named left and top that contains the coordinate data in pixel values.
• size:Object Current size of the image. This object contains width:number, height:number properties in pixel values.
• data:string Base 64 encoded original image
• naturalSize:Object This property is like size property. But this object contains size of the original image.

CircleItem

This item containing rotate,outlineColor,outlineWidth,position,size properties like ImageItem. And additionally this item has a property called color:string that contains the fill color as a rgba value.

RectangleItem

All properties is similiar to the CircleItem.

LineItem

Also LineItem containing the rotate,position,outlineColor,OutlineWeight properties and a property called width:number that containing the width of the line in pixels.

BrushItem

BrushItem also has the rotate,position,outlineColor,OutlineWeight properties and an array of brush spot positions in positions:Position[] property.

TextItem

TextItem has rotate,position,color properties.

• text:string Typed text in the text box.
• fontName:string Name of the font family.
• fontSize:number Font size in pixels.
• underline:bool,italic:bool,bold:bool properties containing the font styles.

Developing

1. Clone the repository

$ git clone https://github.com/whizsid/react-designer-component`

2. Install the dependencies

$ cd react-designer-component
$ yarn

3. Start the development server

yarn start

Contributing

Please lint your code before made a PR.

$ yarn lint

Always follow prettier code styles and check before making your PR.

$ yarn prettier

I will reply to all PRs when I have a free time. Issues and stars also welcome.