{"id":16752374,"url":"https://github.com/whizsid/react-designer-component","last_synced_at":"2025-04-10T15:52:23.037Z","repository":{"id":57163428,"uuid":"211012357","full_name":"whizsid/react-designer-component","owner":"whizsid","description":"A server side renderable react designer canvas","archived":false,"fork":false,"pushed_at":"2019-11-10T08:41:43.000Z","size":1233,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:06:38.456Z","etag":null,"topics":["brush","canvas","circle","designer","line","pinned","prop-types","reactjs","server","square","text","typescript"],"latest_commit_sha":null,"homepage":"http://whizsid.github.io/react-designer-component","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whizsid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T06:06:48.000Z","updated_at":"2022-11-25T17:38:10.000Z","dependencies_parsed_at":"2022-09-01T03:11:43.663Z","dependency_job_id":null,"html_url":"https://github.com/whizsid/react-designer-component","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-designer-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-designer-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-designer-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizsid%2Freact-designer-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whizsid","download_url":"https://codeload.github.com/whizsid/react-designer-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248245391,"owners_count":21071474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["brush","canvas","circle","designer","line","pinned","prop-types","reactjs","server","square","text","typescript"],"created_at":"2024-10-13T02:46:48.006Z","updated_at":"2025-04-10T15:52:23.021Z","avatar_url":"https://github.com/whizsid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/whizsid/react-designer-component\"\u003e\n\t\t\t\u003cimg src=\"https://i.imgur.com/dYifMd6.png\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-green.svg\" alt=\"Travis:Status\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://travis-ci.org/whizsid/react-designer-component\"\u003e\u003cimg src=\"https://travis-ci.org/whizsid/react-designer-component.svg?branch=master\" alt=\"Travis:Status\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/whizsid/react-designer-component\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\" alt=\"Code Style: Prettier\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/react-designer-component\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-designer-component\" alt=\"NPM: Version\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\n\u003cimg align=\"right\" width=\"400px\" src=\"https://i.imgur.com/bXHpw2P.png\" alt=\"React server side renderable designer canvas\" /\u003e\n\nA server side renderable react canvas.\n\n## Features\n\n- Get all items as objects\n- Add texts, images, rectangles and circles\n- You can draw your own shapes by using lines and brush\n- Enable or disable features\n\n### [Watch Demo \u003e\u003e](https://whizsid.github.io/react-designer-component)\n\n\n## Installation\n\nYou can install this component using yarn or npm\n\n```\n//yarn\n$ yarn add react-designer-component\n\n//npm\n$ npm install react-designer-component --save\n```\n\n## Usage\n\n```\nimport Designer from 'react-designer-component';\n\n...\nclass App extends Component {\n\n constructor(props){\n\tsuper(props);\n\n\tthis.state = {items:[]}\n }\n\n handleChangeItems = (items)=\u003e{\n \tthis.setState({items})\n }\n\n render(){\n\treturn (\n\t\t\u003cDesigner\n\t\t\titems={items}\n\t\t\tonChangeItems={this.handleChangeItems}\n\t\t\tfontApiKey=\"API_KEY\"\n\t\t\tpaperSize={{\n\t\t\t\theight: 300,\n\t\t\t\twidth: 600\n\t\t\t}}\n\t\t/\u003e\n\t)\n }\n}\n\n```\n\n## Documentation\n\nPlease provide following props.\n\n| Prop | Description | Type |\n| ------------- |:-------------:| -----:|\n| *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) |\n| *onChangeItems | This callback function will calling when changing items. | (items:DesignerItem)=\u003evoid |\n| className | CSS class name to apply the for the root element | string |\n| 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. |\n| 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. |\n|fontApiKey| Google Font API Key if you using the text feature. All fonts loading from google.| string |\n|paperSize| Size of the paper. | Object with `width:number` and `height:number` properties. Default values are 300 pixel height and 600 pixel width. |\n|drawingArea| Supply coordinates of a polygon if you want a custom shape other than a rectangle. | Array of positions. Ex:- `[{left:300,right:400},...]` |\n### ImageItem\n\nYou can find following properties in an image item.\n\n- `rotate:number` Current degree value\n- `outlineColor:string` Color of the outline as a rgba string. `rgba(210,210,120,0.7)\n- `outlineWeight:number` Weight of the outline as a pixel value.\n- `position: Position` Current position of the image. This object has two properties named `left` and `top` that contains the coordinate data in pixel values.\n- `size:Object` Current size of the image. This object contains `width:number`, `height:number` properties in pixel values.\n- `data:string` Base 64 encoded original image\n- `naturalSize:Object` This property is like `size` property. But this object contains size of the original image.\n\n### CircleItem\n\nThis 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.\n\n### RectangleItem\n\nAll properties is similiar to the `CircleItem`.\n\n### LineItem\n\nAlso `LineItem` containing the `rotate,position,outlineColor,OutlineWeight` properties and a property called `width:number` that containing the width of the line in pixels.\n\n### BrushItem\n\n`BrushItem` also has the `rotate,position,outlineColor,OutlineWeight` properties and an array of brush spot positions in `positions:Position[]` property.\n\n### TextItem\n\n`TextItem` has `rotate,position,color` properties.\n\n- `text:string` Typed text in the text box.\n- `fontName:string` Name of the font family.\n- `fontSize:number` Font size in pixels.\n- `underline:bool`,`italic:bool`,`bold:bool` properties containing the font styles.\n\n## Developing\n\n1. Clone the repository\n\n```\n$ git clone https://github.com/whizsid/react-designer-component`\n```\n\n2. Install the dependencies\n\n```\n$ cd react-designer-component\n$ yarn\n```\n\n3. Start the development server\n\n```\nyarn start\n```\n\n## Contributing\n\nPlease lint your code before made a PR.\n\n```\n$ yarn lint\n```\n\nAlways follow prettier code styles and check before making your PR.\n\n```\n$ yarn prettier\n```\n\nI will reply to all PRs when I have a free time. Issues and stars also welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizsid%2Freact-designer-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhizsid%2Freact-designer-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizsid%2Freact-designer-component/lists"}