All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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