@solid-bricks/barcode ·

Description

A solidjs <Barcode /> component powered by JsBarcode.

Installation

npm

npm i @solid-bricks/barcode

yarn

yarn add @solid-bricks/barcode

pnpm

pnpm add @solid-bricks/barcode

Examples

• barcode-generator: site - source

Usage

import { render } from 'solid-js/web';
import { Barcode } from '@solid-bricks/barcode';

const root = document.getElementById('app');

if (!root) {
  throw new Error('root node not found');
}

render(() => <Barcode value="ping-pong" />, root);

API Reference

Barcode props

| name | type | required | description | | :---------: | :-----------------------------------------------------------------------------------------------: | :----------------------: | ---------------------------------------------------------------------------------------------------------------- | | value | string | yes | the value rendered in the barcode. | | onError | Function | default: console.error | Callback invoked whenever an error occurs while rendering the barcode. | | as | "svg" \| "img" \| "canvas" | default: "svg" | The element that displays the barcode. | | options | Object | default: {} | Additional customization. See JsBarcode wiki for more info. | | class | string | default: undefined | The element class. | | classList | Record<string, boolean> | default: undefined | classList docs | | elemProps | JSX.IntrinsicElements['svg'] \| JSX.IntrinsicElements['img'] \| JSX.IntrinsicElements['canvas'] | default: {} | A record of valid element (see as) props. |

Barcode options example

{
  width: 2,
  height: 100,
  format: "CODE128",
  displayValue: true,
  fontOptions: "",
  font: "monospace",
  textAlign: "center",
  textPosition: "bottom",
  textMargin: 2,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined
}

More informations are available at https://github.com/lindell/JsBarcode.

Reference

• https://github.com/lindell/JsBarcode
• https://github.com/lindell/JsBarcode
• https://www.solidjs.com/docs/latest/api

License

MIT