Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bunlong/svelte-barcode

A light-weight and high-performance component to generate barcode for Svelte.
https://github.com/bunlong/svelte-barcode

barcode javascript svelte svelte-barcode typescript

Last synced: 22 days ago
JSON representation

A light-weight and high-performance component to generate barcode for Svelte.

Awesome Lists containing this project

README 

        
# svelte-barcode



A light-weight and high-performance component to generate barcode for Svelte.



[![NPM](https://img.shields.io/npm/v/svelte-barcode.svg)](https://www.npmjs.com/package/svelte-barcode) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## 🔧 Install



svelte-barcode is available on npm. It can be installed with the following command:



```

npm install svelte-barcode --save

```



svelte-barcode is available on yarn as well. It can be installed with the following command:



```

yarn add svelte-barcode --save

```



**Note:** Install as a dev dependency ( `npm install svelte-barcode -D` ) ( `yarn add svelte-barcode --dev` ) if using [Sapper](https://sapper.svelte.dev) to avoid a SSR error.



## 💡 Usage



```js



  import Barcode from 'svelte-barcode';



```



## props



  

    

      Props

      Type

      Default

      Require

      Description

    

  

  

    

      value

      string

      

      ✔️

      Text to generate.

    

    

      elementTag

      'img' | 'canvas' | 'svg'

      'img'

      ❌

      

    

    

      options

      any

      

      ❌

      Options to generate.

    

  



## options



  

    

      Options

      Type

      Default

      Require

      Description

    

  

  

    

      format

      string?

      auto

      ❌

      Select which barcode type to use. Please check the wikipage of the different barcode types for more information.

    

    

      width

      number?

      2

      ❌

      The width option is the width of a single bar.

    

    

      height

      number?

      100

      ❌

      The height of the barcode.

    

    

      displayValue

      boolean?

      true

      ❌

      

    

    

      text

      string?

      undefined

      ❌

      Overide the text that is diplayed

    

    

      fontOptions

      string?

      ''

      ❌

      With fontOptions you can add bold or italic text to the barcode.

    

    

      font

      string?

      'monospace'

      ❌

      Define the font used for the text in the generated barcode. This can be any default font or a font defined by a @font-face rule.

    

    

      textAlign

      string?

      'center'

      ❌

      Set the horizontal alignment of the text. Can be left / center / right.

    

    

      textPosition

      string?

      'bottom'

      ❌

      Set the vertical position of the text. Can be bottom / top.

    

    

      textMargin

      number?

      2

      ❌

      Set the vertical position of the text. Can be bottom / top.

    

    

      fontSize

      number?

      20

      ❌

      Set the size of the text.

    

    

      background

      string?

      '#ffffff'

      ❌

      Set the background of the barcode.

    

    

      lineColor

      string?

      '#000000'

      ❌

      Set the color of the bars and the text.

    

    

      margin

      number?

      10

      ❌

      Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably.

    

    

      marginTop

      number?

      undefined

      ❌

      

    

    

      marginBottom

      number?

      undefined

      ❌

      

    

    

      marginLeft

      number?

      undefined

      ❌

      

    

    

      marginRight

      number?

      undefined

      ❌

      

    

    

      flat

      boolean?

      false

      ❌

      Only for EAN8 / EAN13

    

  



## ❗ Issues



If you think any of the `svelte-barcode` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.



## 🌟 Contribution



We'd love to have your helping hand on contributions to `svelte-barcode` by forking and sending a pull request!



Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)



How to contribute:



- Open pull request with improvements

- Discuss ideas in issues

- Spread the word

- Reach out with any feedback



## ⚖️ License



The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)