All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Barcode Overview

Barcodes represent data in a machine-readable format and support symbologies.

All graphics are rendered on the client in a Scalable Vector Graphics (SVG) format.

The Barcode wrapper for React is a client-side wrapper for the Kendo UI Barcode widget.

Basic Usage

The following example demonstrates the Barcode in action.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Barcode value={849070} type={"code128"} width={280} height={100} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Features and Functionalities

Types

By default, the Barcode uses the code39 type. To change the type of the Barcode, use the type property.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Barcode value={849070} type={"UPCE"} width={280} height={100} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Borders

The Barcode enables you to define and display borders through the border property.

class LayoutsContainer extends React.Component {
       constructor(props) {
           super(props);
           this.border = {
               width: 2,
               dashType: "solid",
               color: "black"
           }
       }

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Barcode border={this.border} value={849070} type={"UPCE"} width={280} height={100}  />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );
In this article