{"id":13438438,"url":"https://github.com/sonnylazuardi/react-komik","last_synced_at":"2025-04-06T06:12:40.320Z","repository":{"id":57141654,"uuid":"46861975","full_name":"sonnylazuardi/react-komik","owner":"sonnylazuardi","description":":speech_balloon: ReactJS based comic strip creator using fabric.js canvas rendering","archived":false,"fork":false,"pushed_at":"2017-10-28T04:29:57.000Z","size":4548,"stargazers_count":362,"open_issues_count":0,"forks_count":37,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-30T03:11:04.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sonny.js.org/react-komik/","language":"JavaScript","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/sonnylazuardi.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":"2015-11-25T13:03:40.000Z","updated_at":"2025-03-10T09:36:07.000Z","dependencies_parsed_at":"2022-09-03T07:40:29.278Z","dependency_job_id":null,"html_url":"https://github.com/sonnylazuardi/react-komik","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnylazuardi%2Freact-komik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnylazuardi%2Freact-komik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnylazuardi%2Freact-komik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonnylazuardi%2Freact-komik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonnylazuardi","download_url":"https://codeload.github.com/sonnylazuardi/react-komik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"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":[],"created_at":"2024-07-31T03:01:05.537Z","updated_at":"2025-04-06T06:12:40.300Z","avatar_url":"https://github.com/sonnylazuardi.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Front-end Development","Miscellaneous","JavaScript"],"sub_categories":["Uncategorized","Miscellaneous"],"readme":"# React Komik!\n\nReactJS based comic strip creator using [fabric.js](http://fabricjs.com/) canvas rendering. It's like [spectacle](https://github.com/FormidableLabs/spectacle) but for comic. You can edit (positioning, scaling, coloring) the comic after rendering. Reactify anything, reactify comic.\n\n![react-komik](http://sonnylazuardi.github.io/react-komik/dist/logo_big.png)\n\n![jscomic](https://lh3.googleusercontent.com/-J-FI1QCR8Ic/VnzBfXnWU7I/AAAAAAAACC0/rnfb6O9iiDw/s0/jskomik2.gif \"jskomik2.gif\")\n\n# Usage\n\n## NPM modules\n\nJust install it from npm\n\n\tnpm install react-komik\n\nYou can use the component by require it and bundle it with webpack or browserify.\nDon't forget to import React, ReactDOM, and use Babel/JSX transformer with ES2015 (recommended)\n\n```javascript\n\timport React from 'react';\n\timport { render } from 'react-dom';\n\timport { Strip, Panel, Character, Balloon } from 'react-komik';\n\n\tlet Comic = (props) =\u003e (\n\t\t\u003cStrip title=\"Your title here\" column=\"1\"\u003e\n\t\t\t\u003cPanel\u003e\n\t\t\t\t\u003cCharacter\n\t\t\t\t\timage=\"char.png\"\u003e\n\t\t\t\t\t\u003cBalloon \n\t\t\t\t\t\ttext=\"Reactify Comic!\" /\u003e\n\t\t\t\t\u003c/Character\u003e\n\t\t\t\u003c/Panel\u003e\n\t\t\u003c/Strip\u003e\n\t);\n\n\trender(\u003cComic /\u003e, document.getElementById('root'));\n```\n\n## UMD Browser\n\nDownload or include the [komik.js](http://sonnylazuardi.github.io/react-komik/dist/komik.js) file to your HTML. \nDon't forget to include React, ReactDOM and JSX transformer/Babel.\nPlease use NPM modules instead for production.\n\n```html\n\t\u003cscript src=\"http://sonnylazuardi.github.io/react-komik/dist/komik.js\"\u003e\u003c/script\u003e\n\t\u003cscript\u003e\n\t\tlet { Strip, Panel, Character, Balloon } = Komik;\n\n\t\tclass Comic extends React.Component {\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t\u003cStrip title=\"Your title here\" column=\"1\"\u003e\n\t\t\t\t\t\t\u003cPanel\u003e\n\t\t\t\t\t\t\t\u003cCharacter\n\t\t\t\t\t\t\t\timage=\"char.png\"\u003e\n\t\t\t\t\t\t\t\t\u003cBalloon \n\t\t\t\t\t\t\t\t\ttext=\"Reactify Comic!\" /\u003e\n\t\t\t\t\t\t\t\u003c/Character\u003e\n\t\t\t\t\t\t\u003c/Panel\u003e\n\t\t\t\t\t\u003c/Strip\u003e\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tReactDOM.render(\u003cComic /\u003e, document.getElementById('root'));\n\t\u003c/script\u003e\n```\n\n# Demo\n\nThis demo is using UMD browser, hosted on codepen and jsbin.\n\nhttp://codepen.io/sonnylazuardi/pen/JGKmGE\n\nhttp://jsbin.com/zaxabi/edit?html,js,output\n\n# Components\n\nThere are four main components:\n\n## Strip\n\nAttribute | Value Type | Default | Description\n--------- | ---------- | ------- | -----------\ntitle | String | \"Comic Title\" | Your comic title\ncolumn | Integer | 2 | Number of comic's column\npadding | Integer | 0 | Comic padding\nwidth | Integer | 500 | Comic's width\nheight | Integer | 500 | Comic's height\ntop | Integer | 0 | Comic's top position\nleft | Integer | 0 | Comic's left position\nfill | String (Color) | 'white' | Comic's background color\nstroke | String (Color) | 'black' | Comic's stroke color\nstrokeWidth | Integer | 0 | Comic's stroke width\nfontFamily | String (Font Name) | \"Arial\" | Comic's font family\nfontSize | Integer | 13 | Comic's font size\nupperCase | Boolan | false | Comic's text upper case\n\n## Panel\n\nAttribute | Value Type | Default | Description\n--------- | ---------- | ------- | -----------\nheight | Integer | 180 | Panel's height\npadding | Integer | 20 | Panel's padding\nfill | String (Color) | 'white' | Panel's background color\nstroke | Integer | 'black' | Panel's stroke color\nstrokeWidth | Integer | 3 | Panel's stroke width\nbackground | String (Image URL) | null | Panel's background image\n\n## Character\n\nAttribute | Value Type | Default | Description\n--------- | ---------- | ------- | -----------\nimage | String (Image URL) | 'char1.png' | Character's image\nscale | Decimal (0 - 1) | 1 | Character's image scale\nalign | String ('center', 'right', 'left') | 'center' | Character's align position\nleft | Integer | null | Character's left position (will overwrite align)\nbottom | Integer | 0 | Character's bottom position \ntop | Integer | null | Character's top position (will overwrite bottom position)\n\n## Balloon\n\nAttribute | Value Type | Default | Description\n--------- | ---------- | ------- | -----------\ntext | String | 'Hi Bro!' | Balloon's text\nimage | String (SVG URL) | 'chat_right.svg' | Chat balloon SVG images\nleft | Integer | null | Balloon's left position\nbottom | Integer (from Character's top) | -70 | Balloon's bottom position\ntop | Integer | null | Balloon's top position (will overwrite bottom)\nscale | Decimal (0 - 1) | 0.8 | Balloon's image scale\nalign | String ('center', 'left', 'right') | 'left' | Balloon's align from character\npadding | Integer | 12 | Balloon's text padding\nheight | Integer | 150 | Balloon's height\ntextAlign | String ('center', 'left', 'right') | 'center' | Balloon's text align\nfontFamily | String (Font Name) | (The same with Strip's fontFamily) | Balloon's font family\nfontSize | Integer | (The same with Strip's fontSize) | Balloon's font size\n\n# Contributing\n\nIdeas, issues, and PRs are welcomed. You can also directly shoot me an email at sonnylazuardi@gmail.com.\n\n# JS Comic\n\nThis project is actually an effort to write comic easier for [JS Comic](http://jscomic.net). Please follow [@jscomicnet](https://twitter.com/jscomicnet) or like [JS Comic FB page](https://facebook.com/jscomicnet).\n\n# License\n\nMIT @sonnylazuardi\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonnylazuardi%2Freact-komik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonnylazuardi%2Freact-komik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonnylazuardi%2Freact-komik/lists"}