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 :
