Afficher des codes-barres

Inclure les fichiers nécessaires

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

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

Générer des couleurs

Avant de commencer à générer des codes-barres, nous devons décider quelles couleurs nous voulons utiliser.
Généralement, nous utilisons des barres noires et blanches.

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

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

Police pour le label

Nous allons maintenant charger la police pour écrire le label sous le code-barres. Si vous ne souhaitez pas avoir de texte, ignorez cette étape.
Le premier argument est le nom de la police comme vous l'écriveriez dans la propriété CSS font-family. Le deuxième argument est la taille comme vous l'écriveriez pour CSS.

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

Créer le code-barres

Maintenant, nous devons créer le code-barres. Vous utilisez simplement la balise HTML que vous avez importée précédement. Vous pouvez changer les propriétés HTML pour changer les propriétés du code-barres (voir le manuel). Le code-barres sera affiché sur la page du navigateur.

<BakeryCode128

  text="HELLO"

  scale={2}

  thickness={30}

  foregroundColor={colorBlack}

  backgroundColor={colorWhite}

  font={font}

/>