Displaying barcodes

Include necessary files

import { BakeryColor, BakeryFont } from '@barcode-bakery/barcode-react';

import { BakeryCode128 } from '@barcode-bakery/barcode-react/1d';

Generating colors

Before we start generating barcodes, we have to decide which colors we want to use to display our barcode.
Generally, we use black and white bars.

const colorBlack = new BakeryColor(0, 0, 0);

const colorWhite = new BakeryColor(255, 255, 255);

Font for Label

We will now create a font for writing a label under the barcode. If you don't wish to have a text label, ignore this step.
The first argument is the font name as you would use it in a CSS font-family property. The second argument is the size as you would write it in CSS.

const font = new BakeryFont('Arial', '18px');

Creating the barcode

Now, we will create the barcode. You simply use the HTML tag you imported earlier. You can change the HTML properties to change the barcode properties (see the manual). The barcode will be displayed in the browser page.

<BakeryCode128

  text="HELLO"

  scale={2}

  thickness={30}

  foregroundColor={colorBlack}

  backgroundColor={colorWhite}

  font={font}

/>