@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
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