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