Application Programming Reference for React (ReactJS)



This section describes the different fonts and Javascripts required for generating the different types of barcodes.

Codabar Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-codabar'	
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
@font-face {
    font-family: CCodeCodabar_S3_Trial;
    src: url("fonts/ConnectCodeCodabar_S3_Trial.woff") format("woff");
  }

.Codabar {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeCodabar_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts

https://barcoderesource.com/codabar_barcodefont.html

Code 39 Barcode

App.js


import {readable_text,encode} from './connectcode-javascript-code39'	
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCode39_S3_Trial;
    src: url("./fonts/ConnectCode39_S3_Trial.woff") format("woff");
  }

.Code39 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode39_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code39_barcodefont.html

Code39 ASCII (Extended Code39)

App.js

import {readable_text,encode} from './connectcode-javascript-code39ascii'	
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCode39_S3_Trial;
    src: url("fonts/ConnectCode39_S3_Trial.woff") format("woff");
  }

.Code39ASCII {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode39_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code39_barcodefont.html (Same as Code 39)

Code 93 Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-code93'	
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCode93_S3_Trial;
    src: url("fonts/ConnectCode93_S3_Trial.woff") format("woff");
  }

.Code93 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode93_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code93_barcodefont.html

Code128 Auto Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-code128auto'	
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
  @font-face {
    font-family: CCode128_S3_Trial;
    src: url("fonts/ConnectCode128_S3_Trial.woff") format("woff");
  }

.Code128Auto {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode128_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code128_barcodefont.html

Code 128 A Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-code128a'	
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>
	
   


App.css

.
.
.
  @font-face {
    font-family: CCode128_S3_Trial;
    src: url("fonts/ConnectCode128_S3_Trial.woff") format("woff");
  }

.Code128A {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode128_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code128_barcodefont.html

Code 128B Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-code128b'	
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>
	
   


App.css

.
.
.
  @font-face {
    font-family: CCode128_S3_Trial;
    src: url("fonts/ConnectCode128_S3_Trial.woff") format("woff");
  }

.Code128B {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode128_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code128_barcodefont.html

Code 128 C Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-code128c'	
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
  @font-face {
    font-family: CCode128_S3_Trial;
    src: url("fonts/ConnectCode128_S3_Trial.woff") format("woff");
  }

.Code128C {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode128_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/code128_barcodefont.html

EXT2 (Extended 2 Barcode)

App.js

import {readable_text,encode} from './connectcode-javascript-ext2'	
.
.
.
        <div className='barcode'>{encode("12")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_S3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_S3_Trial.woff") format("woff");
  }

.EXT2 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html

EXT5 (Extended 5 Barcode)

App.js

import {readable_text,encode} from './connectcode-javascript-ext5'	
.
.
.
        <div className='barcode'>{encode("12345")}</div>	
        <div className='barcode_text'>{getText()}</div>
	
   


App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_S3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_S3_Trial.woff") format("woff");
  }

.EXT5 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html

GS1 Databar 14 Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-gs1databar14'	
.
.
.
        <div className='barcode'>{encode("12401234567898")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The full 14 digits (including the check digit) are required.

App.css

.
.
.
@font-face {
    font-family: CCodeGS1D_S3_Trial;
    src: url("fonts/ConnectCodeGS1D_S3_Trial.woff") format("woff");
  }

.GS1Databar14 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeGS1D_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 18px}

   


List of fonts
https://barcoderesource.com/gs1databar14_barcodefont.shtml

EAN8 Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-ean8'		
.
.
.
        <div className='barcode'>{encode("12345678")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_HRBS3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_HRBS3_Trial.woff") format("woff");
  }

.EAN8 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_HRBS3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html

EAN13 Barcode (European Article Numbering)

App.js

import {readable_text,encode} from './connectcode-javascript-ean13'	
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate an Extended Style barcode. "1" for On and "0" for Off. When an Extended Style barcode is generated, a barcode font with Embedded Human Readable Text is required. Please see the following for more information:
https://barcoderesource.com/humanreadabletext.shtml

App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_HRBS3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_HRBS3_Trial.woff") format("woff");
  }

.EAN13 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_HRBS3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html

I2of5 Brcode

App.js

import {readable_text,encode} from './connectcode-javascript-i2of5'		
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCodeI2of5_S3_Trial;
    src: url("fonts/ConnectCodeI2of5_S3_Trial.woff") format("woff");
  }

.I2of5 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeI2of5_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/i2of5_barcodefont.html

Industrial 2 of 5 Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-industrial2of5'		
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCodeIND2of5_S3_Trial;
    src: url("fonts/ConnectCodeIND2of5_S3_Trial.woff") format("woff");
  }

.Industrial2of5 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeIND2of5_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/industrial2of5_barcodefont.html

ITF14 Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-itf14'		
.
.
.
        <div className='barcode'>{encode("12345678",1,1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

The third parameter indicates whether to use Top/Bottom or Rectangular Bearer's bar. "0" for Top/Bottom and "1" for Rectangular.

App.css

.
.
.
@font-face {
    font-family: CCodeITF_S3_Trial;
    src: url("fonts/ConnectCodeITF_S3_Trial.woff") format("woff");
  }

.ITF14 {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeITF_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
href=https://barcoderesource.com/itf14_barcodefont.html

Modified Plessy Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-modifiedplessy'		
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate a check digit. "1" for On and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCodeMSI_S3_Trial;
    src: url("fonts/ConnectCodeMSI_S3_Trial.woff") format("woff");
  }

.ModifiedPlessy {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeMSI_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/msi_barcodefont.html

POSTNET Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-postnet'	
.
.
.
        <div className='barcode'>{encode("12345")}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


App.css

.
.
.
@font-face {
    font-family: CCodePostnet_Trial;
    src: url("fonts/ConnectCodePostnet_Trial.woff") format("woff");
  }

.POSTNET {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodePostnet_Trial', sans-serif; font-size: 12px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 12px}

   


List of fonts
https://barcoderesource.com/postnet_barcodefont.html

UCCEAN (GS1 128) Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-uccean'	
.
.
.
        <div className='barcode'>{encode("(10)12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to use Strict GS1 Compliance. "1" for On (Recommended) and "0" for Off.

App.css

.
.
.
@font-face {
    font-family: CCode128_S3_Trial;
    src: url("fonts/ConnectCode128_S3_Trial.woff") format("woff");
  }

.UCCEAN {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCode128_S3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 24px}

   


List of fonts
https://barcoderesource.com/code128_barcodefont.html - Using the same fonts as Code 128

UPCA (Universal Product Code) Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-upca'		
.
.
.
        <div className='barcode'>{encode("12345678",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate an Extended Style barcode. "1" for On and "0" for Off. When an Extended Style barcode is generated, a barcode font with Embedded Human Readable Text is required. Please see the following for more information:
https://barcoderesource.com/humanreadabletext.shtml

App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_HRBS3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_HRBS3_Trial.woff") format("woff");
  }

.UPCA {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_HRBS3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html

UPCE Barcode

App.js

import {readable_text,encode} from './connectcode-javascript-upce'		
.
.
.
        <div className='barcode'>{encode("12345",1)}</div>	
        <div className='barcode_text'>{getText()}</div>	

   


The second parameter indicates whether to generate an Extended Style barcode. "1" for On and "0" for Off. When an Extended Style barcode is generated, a barcode font with Embedded Human Readable Text is required. Please see the following for more information:
https://barcoderesource.com/humanreadabletext.shtml

App.css

.
.
.
@font-face {
    font-family: CCodeUPCEAN_HRBS3_Trial;
    src: url("fonts/ConnectCodeUPCEAN_HRBS3_Trial.woff") format("woff");
  }

.UPCE {width: 5in}
.barcode {font-weight: normal; font-style: normal; line-height:normal; 
	 font-family: 'CCodeUPCEAN_HRBS3_Trial', sans-serif; font-size: 32px}
.barcode_text {font-weight: normal; font-style: normal; line-height:normal; font-family: sans-serif; font-size: 28px}

   


List of fonts
https://barcoderesource.com/upcean_barcodefont.html