Barcode Generator in SPFx WebPart

Introduction

 

This blog will help you use react-barcode in the SPFx web part with React as a framework to generate a barcode.

 

React-barcode can help us generate barcodes with many different barcode formats, such as:

EAN / UPC , CODE 128, CODE 39, ITF-14, MSI, CODABAR, PHARMACODE

 

To check out the code for react-barcode, click on the link below:

 

https://github.com/kciter/react-barcode

 

To download the sample SPFx code:

 

BarcodeGeneratorSPFx

 

Installation

 

To install react-barcode in your SPFx solution, please use the below command:

npm i react-barcode

Code for react-barcode:

 

Import the reference of react-barcode in the file where we it is required to generate the barcode.

import * as Barcode from "react-barcode";

To generate the barcode, add the below code in the render method:

<Barcode value={valueForGeneratingBarcode} ></Barcode>

Complete Web part Code

import * as React from 'react';
import styles from './SampleBarcode.module.scss';
import { ISampleBarcodeProps } from './ISampleBarcodeProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as Barcode from "react-barcode";

export default class SampleBarcode extends React.Component<ISampleBarcodeProps, {}> {
  public render(): React.ReactElement<ISampleBarcodeProps> {
    let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
    return (
      <div className={styles.sampleBarcode}>
        <div className={styles.container}>
          <div className={styles.row}>
            {numbers.map((val) => {
              return (<div className={styles.column}><Barcode value={val} ></Barcode></div>);
            })}
          </div>
        </div>
      </div>
    );
  }
}

Demo