SPFx – React Barcode.

In one of the webpart, I must create the barcode based on the value generated. For that, after few analyses, found a react package. Hence sharing the information for easy access.

The package name is, React-Barcode.
Install using the below commands from your VS Code Terminal.

npm i react-barcode
https://www.npmjs.com/package/react-barcode

The usage is as below.

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

export default class Barcodesample extends React.Component<IBarcodesampleProps, {}> {
  public render(): React.ReactElement<IBarcodesampleProps> {
    return (
      <div className={ styles.barcodesample }>

<div id={`${this.state.MyDynamicValue}`}  >
<div>
         <Barcode value={"000000000321"}
                width={2}
                height={100}
                format={"CODE128"}
                displayValue={true}
                textAlign={"center"}
                background={"#fff"}
                lineColor="#000000"
                margin={0}
                fontSize={20}
              /> 
</div>
</div>
      </div>
    );
  }
}

The Output is as below.

The tag Barcode is rendered as div with svg format image.

To store this, we can use the below lines of code.

let itemNosvg = document.getElementById(`${this.state.MyDynamicValue }`).getElementsByTagName("svg")[0];
        let itemNoblob = new Blob([new XMLSerializer().serializeToString(itemNosvg)], { type: 'image/svg+xml' });
        await sp.web.getFolderByServerRelativeUrl(`${serverRelativeUrl}/ Images/Barcodes`).files.add(`${this.state.MyDynamicValue}.svg`, itemNoblob, true);

Happy Coding
Sathish Nadarajan