Datamatrixgenerator in React Barcode component

28 Oct 202413 minutes to read

Data Matrix

DataMatrix Barcode is a two dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<DataMatrixGeneratorComponent id="barcode" width={"200px"} height={"150px"} value='Syncfusion'></DataMatrixGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { DataMatrixGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <DataMatrixGeneratorComponent
    id="barcode"
    width={"200px"}
    height={"150px"}
     value='Syncfusion'
    ></DataMatrixGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing the Barcode color

A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases the barcode can also be customized to suit the needs. You can achieve this by using the forecolor property .

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<DataMatrixGeneratorComponent id="barcode" width={"200px"} height={"150px"} foreColor={"red"} value='Syncfusion'></DataMatrixGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { DataMatrixGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <DataMatrixGeneratorComponent
    id="barcode"
    width={"200px"}
     height={"150px"}
     foreColor={"red"}
     value='Syncfusion'
    ></DataMatrixGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing the Barcode dimension

The dimension of the barcode can be changed using the height and width property of the barcodegenerator.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<DataMatrixGeneratorComponent id="barcode" width={"100px"} height={"100px"} value='Syncfusion'></DataMatrixGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { DataMatrixGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <DataMatrixGeneratorComponent
    id="barcode"
    width={"100px"}
    height={"100px"}
     value='Syncfusion'
    ></DataMatrixGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customizing the text

In barcode generators you can customize the barcode text by using the display text property .

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<DataMatrixGeneratorComponent id="barcode" width={"200px"} height={"150px"} displayText={{ text: "text" }} value='Syncfusion'></DataMatrixGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { DataMatrixGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <DataMatrixGeneratorComponent
    id="barcode"
    width={"200px"}
    height={"150px"}
    displayText={{ text: "text" }}
     value='Syncfusion'
    ></DataMatrixGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>