https://github.com/kkeeth/riot-barcode

https://github.com/kkeeth/riot-barcode

barcode-generator jsbarcode riot-barcode riotjs

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kkeeth/riot-barcode
• Owner: kkeeth
• License: mit
• Created: 2020-08-08T12:05:55.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-09T06:56:07.000Z (over 2 years ago)
• Last Synced: 2024-10-27T07:15:26.809Z (about 2 months ago)
• Topics: barcode-generator, jsbarcode, riot-barcode, riotjs
• Language: JavaScript
• Homepage: https://kkeeth.github.io/riot-barcode/
• Size: 648 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  


  












`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).

Please see the demo: [https://kkeeth.github.io/riot-barcode/](https://kkeeth.github.io/riot-barcode/)

## Useage

#### ▼ CDN

If you want to use riot-barcode with a CDN service, etc., load the JS file in the html file, and place the tag `` in the component you want to use.

See also the [example directory](https://github.com/kkeeth/riot-barcode/tree/master/example) in the github repository.

- index.html

```html

  

    riot-barcode

    

    

  

  

    


    

    

      riot.compile().then(() => {

        riot.mount("[is='app']")

      })

    

  

```

- app.riot

```html

  


    Please input any text:

    

  

  


  

    const initialValue = 'JsBarcode for RiotJS'

    export default {

      state: {

        inputValue: initialValue,

      },

      handleChange(e) {

        this.update({

          inputValue: e.target.value ? e.target.value : initialValue,

        })

      },

    }

  

```

There are several CDN services available, but I'm including two for your reference.

- [JSDELIVR](https://cdn.jsdelivr.net/npm/riot-barcode@latest/dist/riot-barcode.min.js)

- [UNPKG](https://unpkg.com/riot-barcode/dist/riot-barcode.min.js)

#### ▼ Bundler

Use whatever bandoliers you want(e.g. webpack, rollup, parcel ... etc). For your reference, here's the code for using `webpack`.

- install

```bash

$ npm install -S riot-barcode

```

- index.html

```html

  

    My Riot App

  

  

    


    

  

```

- app.riot

```html

  

```

- app.js (your main js file)

```js

import '@riotjs/hot-reload'

import { component } from 'riot'

import 'riot-barcode'

import App from './app.riot'

component(App)(document.querySelector('[data-riot-component]'))

```

- webpack.config.js

```js

const path = require('path')

module.exports = {

  entry: './src/app.js',

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'bundle.js',

  },

  devServer: {

    open: true,

  },

  module: {

    rules: [

      {

        test: /\.riot$/,

        exclude: /node_modules/,

        use: [

          {

            loader: '@riotjs/webpack-loader',

            options: {

              hot: true,

            },

          },

        ],

      },

    ],

  },

}

```

# License

[MIT](https://github.com/kkeeth/riot-barcode/blob/master/LICENSE) License

# Any issue or want more features? Contact me!

This module has been tested under limited scenarios. If you find any issue please feel free to report via one of the below platforms:

- GitHub: riot-barcode


- Email: [email protected]


- Twitter: @kuwahara_jsri