https://github.com/whizsid/react-designer-component
A server side renderable react designer canvas
https://github.com/whizsid/react-designer-component
brush canvas circle designer line pinned prop-types reactjs server square text typescript
Last synced: 6 months ago
JSON representation
A server side renderable react designer canvas
- Host: GitHub
- URL: https://github.com/whizsid/react-designer-component
- Owner: whizsid
- License: mit
- Created: 2019-09-26T06:06:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-10T08:41:43.000Z (almost 6 years ago)
- Last Synced: 2025-03-18T13:06:38.456Z (7 months ago)
- Topics: brush, canvas, circle, designer, line, pinned, prop-types, reactjs, server, square, text, typescript
- Language: TypeScript
- Homepage: http://whizsid.github.io/react-designer-component
- Size: 1.18 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
---
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 >>](https://whizsid.github.io/react-designer-component)
## 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 (
)
}
}
```
## 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 `DesignerItem`s | Array with [ImageItem](#imageitem), [CircleItem](#circleitem), [RectangleItem](#rectangleitem), [LineItem](#lineitem), [TextItem](#textitem), [BrushItem](#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](src/styleClasses.ts) 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.