react-designer-component v1.0.6

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.

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.