{"id":15386022,"url":"https://github.com/kkeeth/riot-barcode","last_synced_at":"2026-03-25T01:30:16.697Z","repository":{"id":55051883,"uuid":"286035703","full_name":"kkeeth/riot-barcode","owner":"kkeeth","description":null,"archived":false,"fork":false,"pushed_at":"2022-08-09T06:56:07.000Z","size":664,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-15T02:37:34.151Z","etag":null,"topics":["barcode-generator","jsbarcode","riot-barcode","riotjs"],"latest_commit_sha":null,"homepage":"https://kkeeth.github.io/riot-barcode/","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/kkeeth.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":"2020-08-08T12:05:55.000Z","updated_at":"2022-08-09T06:48:37.000Z","dependencies_parsed_at":"2022-08-14T10:10:37.947Z","dependency_job_id":null,"html_url":"https://github.com/kkeeth/riot-barcode","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkeeth%2Friot-barcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkeeth%2Friot-barcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkeeth%2Friot-barcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkeeth%2Friot-barcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kkeeth","download_url":"https://codeload.github.com/kkeeth/riot-barcode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239942793,"owners_count":19722336,"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":["barcode-generator","jsbarcode","riot-barcode","riotjs"],"created_at":"2024-10-01T14:47:03.212Z","updated_at":"2026-03-25T01:30:16.583Z","avatar_url":"https://github.com/kkeeth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kkeeth/riot-barcode/master/assets/img/barcode.png\" alt=\"barcode\" width=\"600\"\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003ca href=\"https://badge.fury.io/js/riot-barcode\"\u003e\u003cimg src=\"https://badge.fury.io/js/riot-barcode.svg\" alt=\"npm version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/kkeeth/riot-barcode\"\u003e\u003cimg src=\"https://travis-ci.org/kkeeth/riot-barcode.svg\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/node-%3E%3D%2016.0.0-brightgreen.svg?style=social\" alt=\"nodejs version\" /\u003e\n\u003ca href=\"https://github.com/kkeeth/riot-barcode/blob/master/LICENSE\"\u003e\u003cimg src=\"http://img.shields.io/badge/license-MIT-blue.svg?style=flat\" alt=\"MIT LICENSE\" /\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n`riot-barcode` is a simple **barcode generator** for [riotjs](https://riot.js.org/) by using [JsBarcode](https://lindell.me/JsBarcode/) library. For detailed specifications, please refer to [this document](https://github.com/lindell/JsBarcode/blob/master/README.md#supported-barcodes).\n\nPlease see the demo: [https://kkeeth.github.io/riot-barcode/](https://kkeeth.github.io/riot-barcode/)\n\n## Useage\n\n#### ▼ CDN\n\nIf you want to use riot-barcode with a CDN service, etc., load the JS file in the html file, and place the tag `\u003criot-barcode /\u003e` in the component you want to use.\n\nSee also the [example directory](https://github.com/kkeeth/riot-barcode/tree/master/example) in the github repository.\n\n- index.html\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eriot-barcode\u003c/title\u003e\n    \u003cscript src=\"riot+compiler.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"riot-barcode.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv is=\"app\"\u003e\u003c/div\u003e\n\n    \u003cscript defer src=\"app.riot\" type=\"riot\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      riot.compile().then(() =\u003e {\n        riot.mount(\"[is='app']\")\n      })\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- app.riot\n\n```html\n\u003capp\u003e\n  \u003cp\u003e\n    Please input any text:\n    \u003cinput\n      type=\"text\"\n      oninput=\"{ handleChange }\"\n      value=\"{ state.inputValue }\"\n    /\u003e\n  \u003c/p\u003e\n  \u003criot-barcode value=\"{ state.inputValue }\" /\u003e\n\n  \u003cscript\u003e\n    const initialValue = 'JsBarcode for RiotJS'\n\n    export default {\n      state: {\n        inputValue: initialValue,\n      },\n      handleChange(e) {\n        this.update({\n          inputValue: e.target.value ? e.target.value : initialValue,\n        })\n      },\n    }\n  \u003c/script\u003e\n\u003c/app\u003e\n```\n\nThere are several CDN services available, but I'm including two for your reference.\n\n- [JSDELIVR](https://cdn.jsdelivr.net/npm/riot-barcode@latest/dist/riot-barcode.min.js)\n- [UNPKG](https://unpkg.com/riot-barcode/dist/riot-barcode.min.js)\n\n#### ▼ Bundler\n\nUse whatever bandoliers you want(e.g. webpack, rollup, parcel ... etc). For your reference, here's the code for using `webpack`.\n\n- install\n\n```bash\n$ npm install -S riot-barcode\n```\n\n- index.html\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMy Riot App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv is=\"app\" data-riot-component\u003e\u003c/div\u003e\n\n    \u003cscript defer src=\"dist/bundle.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- app.riot\n\n```html\n\u003capp\u003e\n  \u003criot-barcode value=\"your any text\" /\u003e\n\u003c/app\u003e\n```\n\n- app.js (your main js file)\n\n```js\nimport '@riotjs/hot-reload'\nimport { component } from 'riot'\nimport 'riot-barcode'\nimport App from './app.riot'\n\ncomponent(App)(document.querySelector('[data-riot-component]'))\n```\n\n- webpack.config.js\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n  entry: './src/app.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  devServer: {\n    open: true,\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.riot$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: '@riotjs/webpack-loader',\n            options: {\n              hot: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n}\n```\n\n# License\n\n[MIT](https://github.com/kkeeth/riot-barcode/blob/master/LICENSE) License\n\n# Any issue or want more features? Contact me!\n\nThis module has been tested under limited scenarios. If you find any issue please feel free to report via one of the below platforms:\n\n- GitHub: \u003ca href=\"https://github.com/kkeeth/riot-barcode/issues\"\u003eriot-barcode\u003c/a\u003e\u003cbr\u003e\n- Email: zensin0082@gmail.com\u003cbr\u003e\n- Twitter: \u003ca href=\"https://twitter.com/kuwahara_jsri\" target=\"_blank\"\u003e@kuwahara_jsri\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkeeth%2Friot-barcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkkeeth%2Friot-barcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkeeth%2Friot-barcode/lists"}