Générer des codes à barres avec kendoreact

Découvrez comment créer et personnaliser les codes à barres pour votre application React avec la bibliothèque de composants Kendoreact.

Codes à barres Les représentations visuelles unidimensionnelles des données sont-elles facilement numérisées et décodées par des lecteurs de code-barres ou des appareils mobiles. Ils sont largement utilisés dans les industries de la vente au détail, de la logistique et des soins de santé pour coder les identifiants de produits, les informations d’expédition ou d’autres détails essentiels dans un format lisible par machine. Qu’il s’agisse de numériser les articles à l’épicerie ou de les repérer sur l’emballage des produits, les codes à barres font une partie familière et intégrale de la vie quotidienne.

Dans cet article, nous explorerons comment créer, personnaliser et implémenter des codes à barres dans les applications React à l’aide du Bibliothèque Kendoreact.

Pour une plongée profonde dans la façon d’implémenter les codes QR (un type de code-barres 2D) dans vos applications React, consultez notre article précédent, Création de codes QR avec Kendoreact.

Le composant de code-barres Kendoreact

Le Code-barres kendoreact composant, partie du Bibliothèque de codes à barres kendoreactsimplifie le processus de génération de codes à barres standard de l’industrie. Il prend en charge diverses symbologies de code-barres (schémas de codage) et propose des options de personnalisation pour la taille, les couleurs et l’affichage de texte.

Le kendoreact <Barcode /> le composant est distribué à travers le @progress/kendo-react-barcodes Package NPM et peut être importé directement:

import { Barcode } from "@progress/kendo-react-barcodes";

Voici un exemple de base de la façon d’utiliser le composant React Barcode:

import * as React from "react";
import { Barcode } from "@progress/kendo-react-barcodes";

const App = () => <Barcode value="123456789012" type="EAN13" />;

export default App;

Cet exemple génère un simple EAN-13 code à barres codant la valeur 123456789012. Par défaut, le composant calcule automatiquement les chiffres de la somme de contrôle (le cas échéant) et adapte le rendu de code à barres pour correspondre à la symbologie sélectionnée.

La numérisation de ce code-barres avec un lecteur compatible renvoie la valeur codée.

Types de code-barres

Les codes à barres sont disponibles dans divers formats ou symbologies, chacun conçu pour des cas d’utilisation spécifiques dans l’industrie. Le composant Barcode Kendoreact prend en charge une variété de types de code-barres de l’industrie 1Dy compris:

• EAN-13: Utilisé à l’échelle internationale pour l’identification des produits au détail.
• UPC-A: Couramment utilisé en Amérique du Nord pour l’emballage de détail.
• Code 39: Code pour les caractères alphanumériques, souvent utilisés dans la logistique et les soins de santé.
• Code 128: Une symbologie très efficace pour coder des caractères alphanumériques et spéciaux.
• MSI: Fréquemment utilisé pour la gestion des stocks et les applications d’entrepôt.

Pour spécifier un type de code-barres dans notre composant, nous pouvons utiliser le type soutenir:

<Barcode value="CODE-39" type="Code39" />

Lorsque vous spécifiez un certain type de code-barres, nous devons vérifier que la valeur du code-barres est conforme aux règles de la symbologie pour éviter les erreurs de rendu. Par exemple, EAN-13 nécessite 12 chiffres, tandis que le code 39 prend en charge une chaîne alphanumérique de longueur variable.

Options de configuration

Le composant BarCode Kendoreact offre des options de configuration pour personnaliser son apparence et ses fonctionnalités. Dans la section suivante, nous explorerons certaines de ces options.

Taille

Nous pouvons contrôler le Taille de code-barres en définissant le width et height accessoires. Cela garantit que le code-barres s’intègre parfaitement à notre disposition d’application.

<Barcode value="123456789012" type="EAN13" width={300} height={100} />

L’exemple ci-dessus rend un code-barres avec une largeur de 300 pixels et une hauteur de 100 Pixels.

Couleur et fond

Le color et background Les accessoires nous permettent de définir les couleurs de premier plan du code-barres et d’arrière-plan, offrant un meilleur contraste visuel ou correspondant au thème de conception de notre application.

<Barcode
  value="123456789012"
  type="EAN13"
  color="#0055ff"
  background="#f5f5f5"
/>

Cet exemple crée un code-barres avec un premier plan bleu et un fond gris clair.

Frontière

En utilisant le border Prop, nous pouvons ajouter une bordure au code-barres. Ceci est utile pour mettre en évidence le code-barres ou l’intégrer dans les étiquettes imprimées.

<Barcode
  value="123456789012"
  type="EAN13"
  border={{ width: 2, color: "#ff0000" }}
/>

Cet exemple ajoute une bordure rouge de 2 pixels autour du code-barres.

Rembourrage

Le padding Prop nous permet d’ajouter de l’espace autour du code-barres, améliorant sa lisibilité et sa scannabilité dans certains cas.

<Barcode value="123456789012" type="EAN13" padding={50} />

Cet exemple rend le code-barres avec 50 pixels de rembourrage de tous les côtés.

Configuration de l’étiquette de texte

Le composant Barcode prend en charge la personnalisation de l’étiquette de texte affichée sous le code-barres. Nous pouvons ajuster son apparence en utilisant le text Prop, qui accepte des configurations comme la taille de la police, la couleur et la configuration de style. Nous pouvons également activer l’affichage de somme de contrôle à l’aide du checksum Prop pour les symbologies qui le soutiennent.

import { Barcode } from "@progress/kendo-react-barcodes";

const textConfig = {
  color: "#0055ff",
  font: "20px Arial",
};

<Barcode value="123456789012" type="EAN13" text={textConfig} checksum={true} />;

Cet exemple styles de l’étiquette avec une couleur bleue et définit la taille de la police à 20 pixels.

Un exemple pratique – un système d’inventaire de produits

L’une des applications les plus pratiques des codes à barres est dans un système d’inventaire de produits, où chaque produit se voit attribuer un code-barres unique pour l’identification, le suivi et la gestion. En utilisant le composant de code-barres Kendoreact, nous pouvons générer dynamiquement des codes de bar pour les produits de notre inventaire, de sorte que chaque élément est facilement numérisable et traçable.

Dans les applications du monde réel, des données de produits telles que les noms, les prix et les réseaux proviendraient généralement d’un serveur ou d’une API, permettant au système de gérer les stocks importants et dynamiquement mis à jour. Une fois ces données disponibles sur le client, voici un exemple simple de rendu et d’affichage des codes à barres pour chaque produit dans une application React.

import * as React from "react";
import { Barcode } from "@progress/kendo-react-barcodes";

const InventoryItem = ({ id, name, price, sku }) => {
  return (
    <div className="k-card">
      <div className="k-card-header">
        <h4>{name}</h4>
        <p>SKU: {sku}</p>
        <p>Price: ${price}</p>
      </div>
      <div className="k-card-body">
        <Barcode
          type="Code128"
          value={sku}
          width={200}
          height={80}
          text={{
            font: "12px Arial",
            color: "#333",
          }}
        />
      </div>
    </div>
  );
};

const App = () => {
  const products = [
    {
      id: "1",
      name: "Wireless Mouse",
      price: 29.99,
      sku: "WM-2023-001",
    },
    {
      id: "2",
      name: "Mechanical Keyboard",
      price: 99.99,
      sku: "KB-2023-002",
    },
  ];

  return (
    <div
      style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }}
    >
      {products.map((product) => (
        <InventoryItem key={product.id} {...product} />
      ))}
    </div>
  );
};

export default App;

L’exemple ci-dessus illustre un système d’inventaire de base où chaque produit est représenté comme une carte contenant les détails du produit et un code-barres généré dynamiquement. Le code-barres utilise le Code 128 Symbologie, une norme de codage adaptée aux données alphanumériques comme les SKU. Le sku La propriété de chaque produit est transmise au composant de code-barres comme la valeur à coder.

Conclure

Le Composant de code-barres Kendoreact facilite la connexion des systèmes physiques et numériques en ajoutant des fonctionnalités de code-barres à nos applications React. Que nous gérions l’inventaire des produits, la génération de billets d’événement ou la gestion des étiquettes d’expédition, le composant simplifie la création de codes à barres et nous donne de nombreuses façons de personnaliser.

Essayez-le par vous-même: Kendoreact est livré avec un essai gratuit de 30 jours.

Essayer maintenant