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:

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

Code for react-barcode:

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

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

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