Fermer

janvier 28, 2025

Création de codes QR avec Kendoreact

Création de codes QR avec Kendoreact


Apprenez à créer un code QR pour votre application React avec facilité en utilisant Kendoreact.

Codes QR (IE, les codes de réponse rapide) sont des codes-barres bidimensionnels qui peuvent stocker des données telles que les URL, le texte ou les coordonnées. Ils sont facilement numérisés à l’aide d’un lecteur de code smartphone ou QR, permettant un accès instantané aux informations intégrées. Du partage des URL aux coordonnées d’intégration, ils fournissent un moyen simple mais puissant de combler les mondes physiques et numériques.

Dans cet article, nous explorerons comment nous pouvons créer, personnaliser et tirer parti des codes QR dans nos applications React avec les progrès Bibliothèque Kendoreact.

Le composant de code QR Kendoreact

Le Code QR Kendoreact le composant simplifie le processus de génération de codes QR et fait partie du Codes à barres kendoreact bibliothèque. Il prend en charge les propriétés configurables comme la taille, les couleurs, les niveaux de correction d’erreur et les superpositions, ce qui le rend adaptable à divers cas d’utilisation.

Ce React QRCode Composant est distribué à travers le @ Progress / kendo-react-barcodes package npm et peut être importé directement de ce package.

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

Le composant QRCode peut être importé et utilisé comme suit:

import * as React from "react";

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

const App = () => (
  <QRCode value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode" />
);

export default App;

L’exemple ci-dessus rendra un code QR de base pour l’URL spécifiée. Par défaut, le code QR aura une taille par défaut (150px par 150px) et des paramètres de correction d’erreur standard.

La numérisation de ce code QR avec un smartphone ou un lecteur de code QR amènera les utilisateurs directement à l’URL fournie.

Options de configuration

Taille

Le <QRCode /> Le composant nous permet de définir sa taille en utilisant le size la propriété et l’adapter aux besoins de mise en page de notre application.

<QRCode
  value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
  size={600}
/>

Dans cet exemple, un code QR avec une taille de 600px par 600px est généré.

Personnalisation des couleurs

Nous pouvons personnaliser les couleurs de premier plan et d’arrière-plan d’un code QR en utilisant le color et background accessoires:

<QRCode
  value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
  color="#166a83"
  background="#f0f0f0"
/>

Cela modifie la couleur primaire du code QR en sarcelle et son fond en gris clair pour un meilleur contraste.

Ajouter une bordure

Les bordures peuvent être ajoutées en utilisant le border propriété:

<QRCode
  value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
  border={{ width: 5, color: "#e15613" }}
/>

Cet exemple ajoute une bordure orange de 5px de large autour du code QR.

Codage et correction d’erreur

Le codage fait référence à la méthode utilisée pour convertir des informations (par exemple, texte ou URL) dans un code QR. Il détermine comment les données sont représentées et permet la compatibilité avec les lecteurs de code QR prévus. Combiné avec une correction d’erreur, qui permet aux codes QR de rester numérisables même s’ils sont partiellement endommagés, ces fonctionnalités aident les performances de code QR fiables et polyvalentes. Différents niveaux de correction d’erreur dictent la quantité de données que les données peuvent être restaurées, ce qui permet d’équilibrer la résilience par rapport aux dommages potentiels et la quantité de données que le code QR peut stocker.

Le Le composant Kendoreact QRCode prend en charge divers formats de codage et niveaux de correction d’erreur. Nous pouvons ajuster ces paramètres en utilisant le encoding et errorCorrection accessoires:

<QRCode  value="https://www.example.com/ 你好世界🌟" encoding="UTF_8" errorCorrection="H" />

Dans cet exemple, UTF-8 Le codage est utilisé pour le niveau de support étendu des caractères et le niveau de correction d’erreur "H" accorde jusqu’à 30% de récupération de données en cas de dommages. Le <QRCode /> composant prend en charge les niveaux de correction d’erreur suivants:

  • L (bas): 7% des données peuvent être restaurées.
  • M (moyen): 15% des données peuvent être restaurées (par défaut).
  • Q (quartile): 25% des données peuvent être restaurées.
  • H (haut): 30% des données peuvent être restaurées.

Superpositions d’image

Les superpositions d’image peuvent rendre les codes QR visuellement attrayants tout en maintenant la lisibilité, grâce à la correction des erreurs. Le composant QRCode prend en charge l’ajout d’une superposition d’image et définit ses dimensions et son emplacement à l’aide du overlay soutenir.

<QRCode
  value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
  
  overlay={{
    type: "image",
    imageUrl:
      "https://d585tldpucybw.cloudfront.net/sfimages/default-source/svg/kendo-react-ninja.svg",
    width: 100,
    height: 100,
  }}
  encoding="UTF_8"
  errorCorrection="H"
  color="#166a83"
  background="#ffffff"
  size={300}
/>

Cet exemple ajoute la mascotte Kendoreact Ninja comme superposition.

Codes QR suisses

Les codes QR suisses sont des types de codes QR spécialisés conçus à des fins de paiement, en particulier pour la facturation et la facturation en Suisse. Ils rationalisent les processus de paiement en intégrant tous les détails nécessaires, tels que Iban, la référence et le montant de paiement, dans un format numérisable.

Le composant QRCode Kendoreact prend en charge la création d’un code QR suisse en définissant le overlay propulser type: 'swiss'. Cela permet au code QR d’adhérer au format spécifique requis pour les paiements suisses.

import * as React from "react";
import { QRCode } from "@progress/kendo-react-barcodes";
const receipt = `SPC
0200
1
CH4431999123000889012
S
Robert Schneider AG
Rue du Lac
1268
2501
Biel
CH






1949.75
CHF
S
Pia-Maria Rutschmann-Schnyder
Grosse Marktgasse
28
9400
Rorschach
CH
QRR
210000000003139471430009017
Instruction of 03.04.2019
EPD
//S1/10/10201409/11/190512/20/1400.000-53/30/106017086/31/180508/32/7.7/40/2:10;0:30
Name AV1: UV;UltraPay005;12345
Name AV2: XY;XYService;54321`;

const App = () => (
  <QRCode
    value={receipt}
    overlay={{
      type: "swiss",
    }}
    errorCorrection="Q"
    size={300}
  />
);

export default App;

Cela génère un code QR suisse avec des détails de paiement pour le reçu spécifié.

Conclure

Le kendoreact Composant de code QR est un outil intuitif pour intégrer les codes QR dans les applications React. Avec des fonctionnalités telles que la taille personnalisable, la couleur, les superpositions et la correction d’erreur, il simplifie la création de codes QR de qualité professionnelle adaptés aux besoins de votre application.

N’oubliez pas: Kendoreact est livré avec un essai gratuit de 30 jours.

Essayer maintenant




Source link