How To Create Barcode Using Kendo-react In React Js.

In this article, we will learn how to create Barcodes using kendo-react in React.js.

− First of all, we have to create a react application.

− Then import the below packages into your project.

npm install @progress/kendo-react-barcodes @progress/kendo-drawing @progress/kendo-licensing

− Install the Default theme package.

npm install –save @progress/kendo-theme-default

− Now open your app.js file and add the code given below :

import * as React from "react";
import { Barcode } from "@progress/kendo-react-barcodes";

const cardStyles = {
    width: "50%",
};
const barcodeStyles = {
    width: "80%",
    "min-width": "50px",
    "aspect-ratio": "2/1",
};


function App() {
    return (
        <div className="k-card-deck m-5">
            <div className="k-card k-text-center" style={cardStyles}>
                <div className="k-card-body">
                    <Barcode
                        style={barcodeStyles}
                        type="EAN13"
                        value="894656655432"
                    />
                </div>
            </div>
        </div>
    )
}

export default App

 

Output :

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories