Custom Design for Barcode control.

5 Dec 201814 minutes to read

The Barcode can be easily configured to the DOM element, such as div. you can create a Barcode with a highly customizable look and feel.

Syntax

ReactDOM.render(EJ.Barcode{})

Example

  • HTML
    • //Create the Barcode by setting the symbologyType and providing input URL to the text property. QR Barcode is rendered by default.
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="default" text="http://www.syncfusion.com" symbologyType="qrbarcode" xDimension="5" > 
</EJ.Barcode>
</div>,
document.getElementById('barcode- default')
);

    Members

    barcodeToTextGapHeight number

    Specifies the distance between the Barcode and text below it.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • 10 pixels

    Example

  • HTML
    • // Add the below code to set barcodeToTextGapHeight during initialization inside the div container. 
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " symbologyType=" code39'" barcodeToTextGapHeight=50 enabled=true>
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    barHeight number

    Specifies the height of bars in the Barcode. By modifying the barHeight, the entire Barcode height can be customized. Please refer to xDimension for two dimensional barcode height customization.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • 150 pixels

    Example

  • HTML
    • // Add the below code to set barHeight during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " barHeight: 50 symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    darkBarColor object

    Specifies the dark bar color of the Barcode. One dimensional barcode contains a series of dark and light bars which are usually colored as black and white respectively.

    NOTE

    1. For the Barcode should be properly detected by all scanners, choose the best possible contrast color.
      2. This property is applicable only for one dimensional barcode.

    Default Value:

    • black

    Example

  • HTML
    • // Add the below code to set darkBarColor during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " darkBarColor="blue" symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    displayText boolean

    Specifies whether the text below the Barcode is visible or hidden.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • true

    Example

  • HTML
    • // Add the below code to hide displayText during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " displayText=false symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    enabled boolean

    Specifies whether the control is enabled.

    Default Value:

    • true

    Example

  • HTML
    • // Add the below code to hide displayText during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " enabled=false symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    encodeStartStopSymbol boolean

    Specifies the start and stop encode symbol in the Barcode. In one dimensional barcodes, an additional character is added as start and stop delimiters. These symbols are optional and the unique of the symbol allows the reader to determine the direction of the Barcode being scanned.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • true

    Example

  • HTML
    • // Add the below code to remove encodeStartStopSymbol during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " encodeStartStopSymbol=false symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    lightBarColor object

    Specifies the light bar color of the Barcode. One dimensional barcode contains a series of dark and light bars which are usually colored as black and white respectively.

    NOTE

    1. For the Barcode should be properly detected by all scanners, choose the best possible contrast color.
      2. This property is applicable only for one dimensional barcode.

    Default Value:

    • white

    Example

  • HTML
    • // Add the below code to set lightBarColor during initialization with inside the div container.   
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " lightBarColor="blue" symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    narrowBarWidth number

    Specifies the width of the narrow bars in the Barcode. The dark bars in the one dimensional barcode contains random narrow and wide bars based on the provided input which can be specified during initialization.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set narrowBarWidth during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " narrowBarWidth= 5 symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    quietZone object

    Specifies the width of the quiet zone. In barcode, a quiet zone is the blank margin on either side of a barcode which informs the reader where a barcode’s symbology starts and stops. The purpose of a quiet zone is to prevent the reader from picking up unrelated information.

    quietZone.all number

    Specifies the quiet zone around the Barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set quiet zone during initialization with inside the div container. 
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " quietZone= {   all: 10  } symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    quietZone.bottom number

    Specifies the bottom quiet zone of the Barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set quiet zone during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " quietZone= {   bottom: 10  } symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    quietZone.left number

    Specifies the left quiet zone of the Barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set quiet zone during initialization.  
container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " quietZone= {   left: 10  } symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    quietZone.right number

    Specifies the right quiet zone of the Barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set quiet zone during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " quietZone= {   right: 10  } symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    quietZone.top number

    Specifies the top quiet zone of the Barcode.

    Default Value:

    • 1 pixel

    Example

  • HTML
    • // Add the below code to set quiet zone during initialization with inside the div container.
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " quietZone= {   top: 10  } symbologyType=" code39">
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    symbologyType enum

    Specifies the type of the Barcode. See SymbologyType

    Name Description
    QRBarcode Represents the QR code
    DataMatrix Represents the Data Matrix barcode
    Code39 Represents the Code 39 barcode
    Code39Extended Represents the Code 39 Extended barcode
    Code11 Represents the Code 11 barcode
    Codabar Represents the Codabar barcode
    Code32 Represents the Code 32 barcode
    Code93 Represents the Code 93 barcode
    Code93Extended Represents the Code 93 Extended barcode
    Code128A Represents the Code 128 A barcode
    Code128B Represents the Code 128 B barcode
    Code128C Represents the Code 128 C barcode
    UPCBarcode Represents the UPC barcode

    Default Value:

    • symbologyType=”qrbarcode”

    Example

  • HTML
    • // Add the below code to set the SymbologyType during initialization with inside the div container.
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="default" text="http://www.syncfusion.com" symbologyType="qrbarcode" xDimension="5" > 
</EJ.Barcode>
</div>,
document.getElementById('barcode- default')
);

    text string

    Specifies the text to be encoded in the Barcode.

    Default Value:

    • empty

    Example

  • HTML
    • // Add the below code to set the text to be encoded while initialization with inside the div container.
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="default" text="http://www.syncfusion.com" symbologyType="qrbarcode" xDimension="5" > 
</EJ.Barcode>
</div>,
document.getElementById('barcode- default')
);

    textColor object

    Specifies the color of the text/data at the bottom of the Barcode.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • black

    Example

  • HTML
    • // Add the below code to set the textColor while initialization with inside the div container.
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " symbologyType="code39" textColor="blue" >
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    wideBarWidth number

    Specifies the width of the wide bars in the Barcode. One dimensional barcode usually contains random narrow and wide bars based on the provided which can be customized during initialization.

    NOTE

    This property is applicable only for one dimensional barcode.

    Default Value:

    • 3 pixels

    Example

  • HTML
    • // Add the below code to set wideBarWidth during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id=" code39" text=" SYNCFUSION " symbologyType="code39" wideBarWidth= 5>
</EJ.Barcode>
</div>,
document.getElementById('barcode- code39')
);

    xDimension number

    Specifies the width of the narrowest element(bar or space) in a Barcode. The greater the x dimension, the more easily a barcode reader will scan.

    NOTE

    This property is applicable only for two dimensional barcode.

    Default Value:

    • 4 pixels

    Example

  • HTML
    • // Add the below code to set xDimension during initialization with inside the div container.  
"use strict";
ReactDOM.render(
<div className="control">
<EJ.Barcode id="default" text="http://www.syncfusion.com" symbologyType="qrbarcode" xDimension="5" > 
</EJ.Barcode>
</div>,
document.getElementById('barcode- default')
);

    Events

    load

    Fires after Barcode control is loaded.

    Name Type Description
  • HTML
    • argument
    		 Object Event parameters from barcode
    Name Type Description
  • HTML
    • cancel
    		 boolean if the event should be canceled; otherwise, false.
  • HTML
    • model
    		 object returns the barcode model
  • HTML
    • type
    		 string returns the name of the event
  • HTML
    • status
    		 boolean return the barcode state

    Example

  • HTML
    • "use strict";
function load(args) {	
	debugger;
 }
ReactDOM.render(
<div className="control">
<EJ.Barcode id="code39" text="SYNCFUSION" symbologyType="code39" load="load">
</EJ.Barcode>
</div>,
document.getElementById('barcode-code39')
);